question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Select] Add support for renderValue with native select

See original GitHub issue
  • I have searched the issues of this repository and believe that this is not a duplicate.

Context

Thanks for making this library ❤️. I am currently using the library and am building a selectbox and when I read the docs I stumbled upon this description for renderValue: https://material-ui-next.com/api/select/#props

Important part:

Render the selected value. You can only use it when the native property is false (default).

I just wanted to ask if it’s planned to add this feature for native selectboxes as well? To be more precise: I want to have EVERY feature of material-ui-next but when I open the select box on mobile a “real” select should open. I found other libraries having this included. They build a <div> with <li> like you do already, but when you click on the <div> a <select> is triggered, so you can use both the features of the plugin AND the native select box.

Is this something you would do, or maybe something a contributor could do or would you reject both the idea and a PR? I’m not so fluent in JS, so not 100% sure if I can fix this problem without making huge BC breaks, but I wanted to know if there are any plans on doing so?

Reason is, we have a country selection where we display the country flag when a country has been selected and only display the country names when the select box is open and we wanted to use the same approach for mobile.

Your Environment

Tech Version
Material-UI v1.0.0-beta.29
React 16
browser any

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:4
  • Comments:8 (7 by maintainers)

github_iconTop GitHub Comments

1reaction
markedwardscommented, Jun 27, 2022

I’m also hitting upon this requirement, integrating react-phone-number-input with MUI. Would be nice to see this supported.

1reaction
oliviertassinaricommented, Jan 19, 2018

I just wanted to ask if it’s planned to add this feature for native selectboxes as well?

@tzfrs There is no plan for such feature. I don’t think that it’s a priority. But I can understand the use case. I have already been building something similar for a date-time selector. The implementation should be straightforward, less than 10 lines of code if we move a large chunk of the logic to userland. So yes, I think that it’s a good idea 👍 .

Read more comments on GitHub >

github_iconTop Results From Across the Web

[Select] Add support for renderValue with native select #9957
Important part: Render the selected value. You can only use it when the native property is false (default). I just wanted to ask...
Read more >
how to display a value other than the renderValue in material ...
This is only useful if you want the selected value to look different than the corresponding MenuItem , but the content you had...
Read more >
Select API - Material UI - MUI
Name Type Default autoWidth bool false children node classes object
Read more >
API - React Select
A flexible and beautiful Select Input control for ReactJS with multiselect, autocomplete and ajax support.
Read more >
React MUI Select Input - GeeksforGeeks
multiple: If true, the value must be an array and the menu will support multiple selections. native: It denotes, If it is true,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found