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

[docs] Fix Select onChange call #34408

Merged
merged 1 commit into from Sep 23, 2022
Merged

Conversation

siriwatknp
Copy link
Member

@siriwatknp siriwatknp commented Sep 21, 2022

Fixes #34398

Some parts of the docs did not migrate to the new arguments in #34158

@siriwatknp siriwatknp added the docs Improvements or additions to the documentation label Sep 21, 2022
@mui-bot
Copy link

mui-bot commented Sep 21, 2022

No bundle size changes

Generated by 🚫 dangerJS against adb91d3

@@ -560,7 +560,7 @@ export default function ButtonThemes() {
}}
size="sm"
value={design}
onChange={setDesign}
onChange={(event, newValue) => setDesign(newValue)}
Copy link
Member

Choose a reason for hiding this comment

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

Off-topic

Why not use?

Suggested change
onChange={(event, newValue) => setDesign(newValue)}
onChange={(event) => setDesign(event.target.value)}

so developers can more easily switch between a native <select> (for mobile) and non-native one?

Copy link
Member Author

Choose a reason for hiding this comment

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

#34158 (comment). That'd be nice, I forgot about native select. cc @michaldudak

Copy link
Member

Choose a reason for hiding this comment

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

event.target.value isn't reliable in this case. The event could be a click event on a li element that represents a select option.

Copy link
Member

Choose a reason for hiding this comment

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

It could be made reliable

// Redefine target to allow name and value to be read.
// This allows seamless integration with the most popular form libraries.
// https://github.com/mui/material-ui/issues/13485#issuecomment-676048492
// Clone the event to not override `target` of the original event.
const nativeEvent = event.nativeEvent || event;
const clonedEvent = new nativeEvent.constructor(nativeEvent.type, nativeEvent);
Object.defineProperty(clonedEvent, 'target', {
writable: true,
value: { value: newValue, name },
});

The value is of event.target.value can be: form libraries integrations.
The value of Select allowing a native select can be: using the platform where it works best.

Copy link
Member

Choose a reason for hiding this comment

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

Fair point. I'll create an issue to support event.target.value in SelectUnstyled.
As for native selects, I think it could be implemented in Material/Joy, not Base.

Copy link
Member Author

Choose a reason for hiding this comment

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

@michaldudak I think it should not block this PR.

Copy link
Member

Choose a reason for hiding this comment

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

Very much agree, it's under the "off-topic" umbrella.

@oliviertassinari oliviertassinari added bug 🐛 Something doesn't work component: select This is the name of the generic UI component, not the React module! package: joy-ui Specific to @mui/joy labels Sep 21, 2022
@siriwatknp siriwatknp requested review from mnajdova and removed request for michaldudak September 22, 2022 03:46
@siriwatknp siriwatknp merged commit 3632e31 into mui:master Sep 23, 2022
alexfauquette pushed a commit to alexfauquette/material-ui that referenced this pull request Oct 14, 2022
daniel-rabe pushed a commit to daniel-rabe/material-ui that referenced this pull request Nov 29, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: select This is the name of the generic UI component, not the React module! docs Improvements or additions to the documentation package: joy-ui Specific to @mui/joy
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Client exception on website in Joy -> Sheet component
5 participants