Programmatically changing the selected option with Selectfield & React

[one-giant-leap]

  <select value="B">
    <option value="A">Apple</option>
    <option value="B">Banana</option>
    <option value="C">Cranberry</option>
  </select>

The selected in an HTML is normally specified through that option's selected attribute. In React, in order to make components easier to manipulate, the format above is adopted instead. Programmatically setting the value attribute on a Selectfield only partially works - the text within the with class 'mdl-selectfield__selected-option-title' doesn't reflect the selected option in this scenario - with this being said, the selected option does appear to be selected when you click on the Selectfield to view all of the options (the option specified by 'value' is highlighted and appears directly under the cursor).

dgrubelic commented 8 years ago

Thanks for checking out Selectfield component and reporting this...

I think i get what you're trying to say, but to make things crystal clear, can you make CodePen or some other demo so i can see what you're trying to accomplish?

dgrubelic commented 8 years ago

I was just thinking about this and checking this out on an example (just to make sure) and this isn't standard browser implementation. Since MDL is not meant to be "framework oriented", meaning that it wont take any direction and implementation of any client side framework, there is nothing i can do here.

You can check out the CodePen here: http://codepen.io/dgrubelic/pen/GZOjrw

Also, Selectfield component is still in development so some things are missing and some things will be refactored. Stay tuned for changes.

one-giant-leap commented 8 years ago

Thanks for taking a look. I think the mentioning of React has confused the matter somewhat - I've tweaked the CodePen to better explain the situation where Selectfield doesn't currently work as I'd expect.

Would you classify the following CodePen as a standard browser implementation? http://codepen.io/anon/pen/vGWXPP

Not to worry if it is out of the scope of what you want to do with Selectfield - I am very thankful for your beautiful DatePicker which I was able to get working without a problem in React.

dgrubelic commented 8 years ago

I see what you're trying to do.. Unfortunately, i think that this is the same issue as we had with Textfield. When you set value property, change event is not fired and there is no way to trigger validation logic or title rendering logic except manually. That is why there will probably be method to trigger title rendering after value property is set. I know that this is what most of developers expect to be working, but there is just no way to do this except manually. For example, Angular team implemented dirty checking for exactly the same problem, but they have implemented other channels that trigger dirty checking in the first place.

As i said, all other issues will be fixed during future development. Fell free to report any other issues with Selectfield so i can focus on them, too...

one-giant-leap commented 8 years ago

Your insightful comments above have led me on the right path towards implementing a satisfactory solution to my issue. Adding the following code to my React component results in the Selectfield working as expected.

componentDidUpdate() { this.refs.selectInput.MaterialSelectfield.selectedOptionValueElement_.innerText = this.props.value; }

Where 'selectInput' is the 'ref' of the 'mdl-selectfield' div, and 'this.props.value' is the value that the Selectfield is set to.

dgrubelic commented 8 years ago

This technically wouldn't be my suggestion since selectedOptionValueElement_ is private property, but since i still don't have public method for selected value update, this could work as a quick fix.

• © Githubissues.
• Githubissues is a development platform for aggregating issues.

[dgrubelic]

Thanks for checking out Selectfield component and reporting this...

I think i get what you're trying to say, but to make things crystal clear, can you make CodePen or some other demo so i can see what you're trying to accomplish?

[dgrubelic]

I was just thinking about this and checking this out on an example (just to make sure) and this isn't standard browser implementation. Since MDL is not meant to be "framework oriented", meaning that it wont take any direction and implementation of any client side framework, there is nothing i can do here.

You can check out the CodePen here: http://codepen.io/dgrubelic/pen/GZOjrw

Also, Selectfield component is still in development so some things are missing and some things will be refactored. Stay tuned for changes.

[one-giant-leap]

Thanks for taking a look. I think the mentioning of React has confused the matter somewhat - I've tweaked the CodePen to better explain the situation where Selectfield doesn't currently work as I'd expect.

Would you classify the following CodePen as a standard browser implementation? http://codepen.io/anon/pen/vGWXPP

Not to worry if it is out of the scope of what you want to do with Selectfield - I am very thankful for your beautiful DatePicker which I was able to get working without a problem in React.

[dgrubelic]

I see what you're trying to do.. Unfortunately, i think that this is the same issue as we had with Textfield. When you set value property, change event is not fired and there is no way to trigger validation logic or title rendering logic except manually. That is why there will probably be method to trigger title rendering after value property is set. I know that this is what most of developers expect to be working, but there is just no way to do this except manually. For example, Angular team implemented dirty checking for exactly the same problem, but they have implemented other channels that trigger dirty checking in the first place.

As i said, all other issues will be fixed during future development. Fell free to report any other issues with Selectfield so i can focus on them, too...

[one-giant-leap]

Your insightful comments above have led me on the right path towards implementing a satisfactory solution to my issue. Adding the following code to my React component results in the Selectfield working as expected.

componentDidUpdate() { this.refs.selectInput.MaterialSelectfield.selectedOptionValueElement_.innerText = this.props.value; }

Where 'selectInput' is the 'ref' of the 'mdl-selectfield' div, and 'this.props.value' is the value that the Selectfield is set to.

[dgrubelic]

This technically wouldn't be my suggestion since selectedOptionValueElement_ is private property, but since i still don't have public method for selected value update, this could work as a quick fix.