react-selectize icon indicating copy to clipboard operation
react-selectize copied to clipboard

TypeError: Cannot read property 'position' of undefined when using [tether] option

Open mdekalka opened this issue 8 years ago • 4 comments

Do you want to request a feature or report a bug? Bug What is the current behavior? Create a SimpleSelect component with tether option. Try to chose any item option - error TypeError: Cannot read property 'position' of undefined appears.

class TestSelect extends Component {
  state = {
    options: ["apple", "mango", "grapes", "melon", "strawberry"].map(fruit => ({ label: fruit, value: fruit }))
  }

  render() {
    return (
      <div style={{ border: '1px solid black', height: 200, overflow: "auto", padding: 20 }}>
       <div style={{ padding: 20 }}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit
       </div>

        <SimpleSelect
          options={this.state.options}
          placeholder="Select a fruit"
          theme="bootstrap3"
          hideResetButton
          tether={true}
          placeholder="Select a fruit"
          >
        </SimpleSelect>

       <div style={{ padding: 20 }}>
          Fusce aliquet dui tortor, imperdiet viverra augue pretium nec
       </div>
      </div>
    )
  }
}

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem: Select SimpleSelect component and try to chose any option. Demo issue: https://codesandbox.io/s/j26ojv34kw Gif: image What is the expected behavior? After choosing any option with enabled tether option - select should not throwing error. Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React? React 16.0.0 Note: This demo will work with React v.15.4.2+, but I catched few times this issue also, but can't create an always-reproduce code to test. Chrome 63.0.3239.84 Win10 P.S. Seems the same issue https://github.com/furqanZafar/react-selectize/issues/189, just create a more reliable ticket.

mdekalka avatar Jan 08 '18 11:01 mdekalka

I confirm this is also happening to me with react 16.0.0 and react-selectize 3.0.1 using Chromium 64.0.3282.140

nossila avatar Feb 21 '18 23:02 nossila

Does anybody work on fix for this issue?

I had a reply on https://github.com/danreeves/react-tether/issues/62

ghost avatar Mar 10 '19 13:03 ghost

if we change src/ReactTether.ls to be more defensive in line 60

something like render new-props.children, @node, ~> @tether.position! if @tether.position

it might fix it (I am really bad with livescript, it might have an error)

@furqanZafar 🙏

santiagoGuti avatar Jun 19 '19 14:06 santiagoGuti

I have fork and fix this issue in https://github.com/santiagoGuti/react-selectize, it is a temporal fix but it is better than nothing.

santiagoGuti avatar Nov 19 '19 15:11 santiagoGuti