TypeError: Cannot read property 'position' of undefined when using [tether] option
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:
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.
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
Does anybody work on fix for this issue?
I had a reply on https://github.com/danreeves/react-tether/issues/62
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 🙏
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.