Skip to content

[SelectField] Port SelectField component to v1#7632

Closed
kybarg wants to merge 51 commits into
mui:v1-betafrom
kybarg:next-select-field
Closed

[SelectField] Port SelectField component to v1#7632
kybarg wants to merge 51 commits into
mui:v1-betafrom
kybarg:next-select-field

Conversation

@kybarg

@kybarg kybarg commented Aug 2, 2017

Copy link
Copy Markdown
Contributor

This PR includes all efforts from #7458 #6608 and #6301

Hope to push it forward a bit

Closes #5716

kybarg and others added 30 commits March 8, 2017 05:53
…th form inputs, fixes dirty/clean events, and another shouldComponentUpdate
Comment thread src/SelectField/SelectField.js Outdated
*/
disabled: PropTypes.bool,
/**
* Whether the label should be displayed in an error state.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

"If true, the label will be displayed in an error state."

Comment thread src/SelectField/SelectField.js Outdated
*/
helperTextClassName: PropTypes.string,
/**
* Whether the label should be hidden when option is selected.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

"If true, the label will be hidden when that option is selected."

Comment thread src/SelectField/SelectField.js Outdated
*/
InputLabelProps: PropTypes.object,
/**
* Passed as `inputProps` to the internal `<Input />` component.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

"Properties applied to the Input element."

Comment thread src/SelectField/SelectField.js Outdated
*/
InputProps?: Object,
/**
* Use that property to pass a ref callback to the native input component.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Please could you standardise the wording of this one?

*/
required?: boolean,
/**
* Use that property to pass a ref callback to the root component.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

And this one.

hideLabel,
id,
inputClassName,
InputClassName,

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

@kybarg Thanks for maintaining standards - if the consensus is to change this, best to do so consistently across all affected components.

@kybarg

kybarg commented Aug 30, 2017

Copy link
Copy Markdown
Contributor Author

@oliviertassinari @mbrookes I've updated this PR according to the latest requirements of the v1 branch

@stunaz

stunaz commented Aug 31, 2017

Copy link
Copy Markdown
Contributor

@kybarg right now I take it, SelectField only supports string|number as value, is it intentionnal or do you plan to also support Object as value ?

@kybarg

kybarg commented Aug 31, 2017

Copy link
Copy Markdown
Contributor Author

@stunaz The main aim of this PR is to implement "native" <select /> component with awesome Material Design look 😊
As for now, I believe, you can implement it using state and custom compareFunction

@stunaz

stunaz commented Aug 31, 2017

Copy link
Copy Markdown
Contributor

Nice!

@marcusjwhelan

Copy link
Copy Markdown

@kybarg could you add an example using an object in the docs?

@kybarg

kybarg commented Sep 1, 2017

Copy link
Copy Markdown
Contributor Author

@marcusjwhelan As I said this PR is more about bringing HTML <select> into Material-UI.
I would just keep array of values in the state and pass indexes only as value to the component to handle array of objects.

@oliviertassinari oliviertassinari self-assigned this Sep 2, 2017
@oliviertassinari

Copy link
Copy Markdown
Member

@kybarg I'm using your PR as a starting point for the migration. Good job so far 👍. Also, don't be surprised if the API is different. I'm playing around some idea I have for now.

@oliviertassinari oliviertassinari added the on hold There is a blocker, we need to wait. label Sep 2, 2017
@oallouch

oallouch commented Sep 3, 2017

Copy link
Copy Markdown

@oliviertassinari please don't forget we're all waiting for it to migrate and it's all in beta. It's ok for me if it changes later, even a lot. Anyway, it's nothing compared to the migration to v1 :)

@oliviertassinari

oliviertassinari commented Sep 3, 2017

Copy link
Copy Markdown
Member

Quick update, 20% done:

giphy

improved

  • Native version
  • Menu version
  • Accessibility
  • Edge cases
  • Finalize the API
  • Documentation
  • Unit tests
  • Flow
  • TypeScript

@ernani

ernani commented Sep 3, 2017

Copy link
Copy Markdown

Subscribing to this one! Thanks!

@oliviertassinari oliviertassinari mentioned this pull request Sep 3, 2017
12 tasks
@marcusjwhelan

Copy link
Copy Markdown

@kybarg I guess I am confused by your comment. It is very easy to add object for an array of objects on select list. I have my own I made for a select table given dynamic data already.

Would this select list be able to handle sending an array of objects? Why would I need to send the index? Can't you use the onChange event handler to capture the object in questions not needing an index?

@oliviertassinari

Copy link
Copy Markdown
Member

@marcusjwhelan It won't support an object. It will support an array for the multi select use case. It's brittle to serialize an object into an input field (that we need for taking advanage of the platform).

@kybarg

kybarg commented Sep 4, 2017

Copy link
Copy Markdown
Contributor Author

@rina-andria

Copy link
Copy Markdown

looking forward to this change. our migration to the v1 depends on this feature... thanks for the nice work!

@kybarg
kybarg deleted the next-select-field branch October 11, 2018 20:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

on hold There is a blocker, we need to wait. scope: select Changes related to the select. type: new feature Expand the scope of the product to solve a new problem.

Projects

None yet

Development

Successfully merging this pull request may close these issues.