Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
mdekalka opened this issue Jan 8, 2018 · 4 comments

Comments

@mdekalka
Copy link

mdekalka commented Jan 8, 2018

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 #189, just create a more reliable ticket.

@mdekalka mdekalka changed the title TypeError: Cannot read property 'position' of undefined when using **tether** option TypeError: Cannot read property 'position' of undefined when using [tether] option Jan 8, 2018
@nossila
Copy link

nossila commented Feb 21, 2018

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

@ghost
Copy link

ghost commented Mar 10, 2019

Does anybody work on fix for this issue?

I had a reply on danreeves/react-tether#62

@santiagoGuti
Copy link

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
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants