Select does not display the selected dropdown

[panigrah]

I have a simple Select box in a Grommet Form. I am using standalone version of grommet.

Expected Behavior

It should display the selected option without having to make it a connected component and it should always fire the onChange event when I change the selected option.

Actual Behavior

Selecting a dropdown option does not update the view with the selected item. And the onChange event does not fire the first time I pick an select option. It fires the second time onwards.

I updated the code to make it a connected component.

  <Select value={this.state.selection} onChange={(t) => {this.setState({selection: t.value});} />

This fixes the problem but the onChange does not fire the first time - so I have to pick the dropdown twice to make it work.

This is part of a large project and I am not able to break it down into a smaller part to copy paste it. If somebody can tell me how to debug, i.e. where to start I can dig into the code and try to resolve myself. I am hoping that somebody else has seen this issue but was able to resolve it easily and did not need to report it.

Your Environment

• Grommet version: 1.7.0
• Browser Name and version: Chrome, Safari, Firefox
• Operating System and version (desktop or mobile): tested in desktop only

[karatechops]

Hi @panigrah, thanks for filing this issue. Select does not have an internal method to track state, it's up to the user to track what is selected and what value to display. Just to clarify your use case - are you using something that is capturing values from the DOM when submitting the form versus submitting your Form's state? I can see the benefit of allowing Select to track its own state as I believe most of Grommet's form elements can function not connected (TextInput, CheckBox).

I'm going to tag Select's 2.x card (#1484) so we can discuss implementing this feature. I'll have to discuss with the team to see if this is worth adding to 1.x as we're only doing bug fixes in 1.x at the moment.

I've created a Codepen displaying the various Select behaviors. I'm not totally clear on the issue of onChange not firing, it properly fires when we pass a handler to the onChange prop. Would it be possible for you to fork the Codepen and try to re-create the onChange not firing upon first select?

[panigrah]

@karatechops i copied the Codepen into my project as a standalone component. OnChange doesn't fire for the first change but then fires after I change it again. But it works in the codepen.

How should I debug this? I don't see any error messages on the console.

I understand now why it doesn't track state - so thats not a bug!

[karatechops]

@panigrah, is the Select in a Layer? I've seen a bug where sometimes a component which uses the Drop util (Select, Menu, etc.) loses app context. I believe It could also happen if your app is running two versions of React - IE an NPM package is running 1 version of React while your app is running another. Regardless of the cause, the first Select click you should be seeing an error in your console. Does anything throw to the console when onChange doesn't fire?

[panigrah]

its not in a layer. I took everything out and only put in the codepen sample to my main file. I have the same issue. There is no error on the first select click.

I will start removing packages one by one to see if there is a conflict.

[panigrah]

@karatechops I stripped the project down to remove everything and inserted only the codepen sample. I still have the issue. The onClick event handler on the drop down list does not get called the very first time its clicked. Its as if the onClick gets swallowed by a different component the first time.

After the dropdown has been created at least once - the Clickevent handler does get called everytime.

[panigrah]

@karatechops I tracked it down to this bug in react-dom

facebook/react#8575

So upgrading my react-dom to the latest fixed this issue.

[karatechops]

@panigrah, nice work! To document the issue for search purposes - you went to react-dom 15.6.1 from which version?

[panigrah]

from 15.4.1

This is the default version of React in the react-boilerplate here
https://github.com/react-boilerplate/react-boilerplate