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

[DropDownMenu] Controlled field should clear when value is undefined #1227

Merged
merged 3 commits into from
Aug 3, 2015

Conversation

marnusw
Copy link
Contributor

@marnusw marnusw commented Jul 21, 2015

When DropDownMenu is used with a controlled SelectField the value is updated properly except when the value is undefined. In that case it should reset the select to the initial "unselected" state, but instead the last selection is maintained and displayed on top of the hint text. This is a patch to fix that. (I realise DropDownMenu will fall away eventually, but I think fixing it now is still worthwhile; this should also be outcome in any future implementation.)

I also noticed that isHovered was maintained in the DropDownMenu state which, as far as I could see, is never used. This caused a lot of unnecessary re-renders. I've removed that as well, but purposefully added it as the latter commit. If maintaining this status does serve some purpose I'm missing I'll just lop that one off.

@hai-cea
Copy link
Member

hai-cea commented Jul 27, 2015

Thanks @marnusw - looks like you did some cleanup on the hovered state as well? You may want to remove these lines?
https://github.com/marnusw/material-ui/blob/emptyControlled/src/drop-down-menu.jsx#L189

@marnusw
Copy link
Contributor Author

marnusw commented Jul 27, 2015

Missed those, I've removed them now too.

@hai-cea
Copy link
Member

hai-cea commented Jul 27, 2015

Thanks @marnusw - after some more testing, it looks like this PR broke SelectField. Please check out #/components/text-fields on the docs site of this PR. Selecting an item blanks out the select field.

@@ -82,7 +82,7 @@ let SelectField = React.createClass({
},

onChange(e, index, payload) {
if (payload) {
if (payload && this.props.valueMember) {
e.target.value = payload[this.props.valueMember] || payload;
}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The problem was on these lines. Since the SelectField doesn't have a valueMember prop, the payload object was passed up in its entirety rather than the value. Checking for a valueMember solved the issue.

However, I wonder if these three lines shouldn't be removed entirely since the same action is taken in DropDownMenu on line 284? I also can't quite figure why the changes I made broke this. I think this might have been a hidden issue all along?

(And if valueMember is specified on SelectField it will be passed down to the DropDownMenu along with the "other" props, and then it will still work as this code suggests.)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeh, it does seem weird that SelectField is having to handle onChange. It seems like it should be handled in one place?

@marnusw
Copy link
Contributor Author

marnusw commented Jul 30, 2015

I've removed the change handler in SelectField completely. It is now passed through to the DropDownMenu directly.

hai-cea added a commit that referenced this pull request Aug 3, 2015
[DropDownMenu] Controlled field should clear when value is undefined
@hai-cea hai-cea merged commit 9d2adc3 into mui:master Aug 3, 2015
@hai-cea
Copy link
Member

hai-cea commented Aug 3, 2015

Thanks @marnusw

@marnusw marnusw deleted the emptyControlled branch September 27, 2015 18:18
@zannager zannager added the component: menu This is the name of the generic UI component, not the React module! label Mar 15, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: menu This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants