[SelectField] Port component #6301

kybarg · 2017-03-08T03:56:46Z

This is PR is just to start discussion on #5716 and #4792 as for now

Desired functionality:

Single option selection
Multiple options selection [SelectField] [DropDownMenu] Implement multiple select #1956
Use <select> element as base to handle autofill
Custom options content
Input for filter and search options
Options loading state appearance like here
Options groups

Overall progress

Component
Tests (at least unit tests)
Docs
Demo

avocadowastaken · 2017-03-08T07:32:59Z

src/SelectField/SelectField.js

+        >
+          {React.Children.map(children, (child, index) =>
+            React.cloneElement(child, {
+              selected: value === child.props.value,


I also suggest add custom comparator that by default will compare strictly

and use any prop type for value

@umidbekkarimov You want to have ability to set custom comparison operator like == or ===, etc?

@muibot

and use any prop type for value

I want to stick with native html <select> element.

Mostly deepEqual, I use { id, name } objects across my project alot, and pass them as a value prop to SelectField.

It worth discussion, cause previous API supported this http://www.material-ui.com/#/components/select-field

And it would be another breaking change.

Anyways it's easy to write wrapper over it.

@umidbekkarimov You are right, fixed both 😄

oliviertassinari · 2017-03-08T21:20:17Z

@nathanmarks Might have already started migrating the select component. What's the status on that?

kybarg · 2017-03-15T11:13:31Z

@oliviertassinari any updates?

StevenACoffman · 2017-03-15T15:04:53Z

docs/site/src/demos/select-field/select-field.md

@@ -0,0 +1,10 @@
+# Select Filed


Typo: Filed -> Field

oliviertassinari · 2017-03-15T20:08:09Z

@kybarg I'm hoping that @nathanmarks could bring us some light 💡 . He made quite some progress with the component but he lost his work by mistake.
I will look at it tomorrow otherwise.

oliviertassinari · 2017-03-26T16:15:06Z

In case that might help, I have been cleaning the issues for the SelectField component. Here is the list That's a challenging component to port to next!

I have been trying the component out locally, here is the first issue I noticed:

…select-field

dummerbd · 2017-04-14T17:12:01Z

Is anyone actively working on this? I've been hacking on the work done here and I'm wondering if using an actual <select> element is the best way to go. The work done here works very well for mouse interaction but there's possibly an issue with styling on OSX (the non-focused underline looks weird?) and the select element interferes with proper keyboard nav since it opens up when tabbed to instead of the menu opening.

I've been looking at the way Angular-Material (original and v2) build their select component and they're using "divs" in a similar way to MUI's master branch impl. From what I can tell, using a <select> makes reusing the Input component much easier, is there any other reason to use it? Might it be easier to use divs instead?

dummerbd · 2017-04-14T18:03:23Z

Oh, I see in the first post that we want the <select> for autofill to work.

kybarg · 2017-04-14T23:44:34Z

@dummerbd Sorry, switched to work on TextField lately)
And yes I want to wrap native select element not to loose browser features. I don't have Safari to test but I will dig on that) @oliviertassinari also reported that issue

oliviertassinari · 2017-04-15T08:56:33Z

I'm adding the on hold state to this PR as @dummerbd is continuing the effort 😄 .

oliviertassinari · 2017-04-20T11:32:35Z

I don't think that we need to keep this PR opened. I'm closing.

SelectField initial commit

850565b

muibot added PR: Needs Review PR: needs revision The pull request can't be merged. More details is available on the code review or fails in the CI and removed PR: Needs Review labels Mar 8, 2017

Different label bihaviour

cb094cf

muibot added the PR: Needs Review label Mar 8, 2017

kybarg added 2 commits March 8, 2017 08:22

Beeter demo, proper select size

0526359

Props validation, lint fixes

86bf0b2

avocadowastaken reviewed Mar 8, 2017

View reviewed changes

kybarg added 3 commits March 8, 2017 09:46

Fixed value type

33a5b3a

Added ability to set custom compare function

dd58c29

Fixed prop description

4dace18

mbrookes added the next label Mar 8, 2017

oliviertassinari removed the PR: needs revision The pull request can't be merged. More details is available on the code review or fails in the CI label Mar 11, 2017

StevenACoffman reviewed Mar 15, 2017

View reviewed changes

docs/site/src/demos/select-field/select-field.md

@@ -0,0 +1,10 @@

# Select Filed

Copy link

StevenACoffman Mar 15, 2017

Choose a reason for hiding this comment

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

Typo: Filed -> Field

kybarg added 2 commits April 10, 2017 06:07

Merge remote-tracking branch 'refs/remotes/callemall/next' into next-…

cb89d48

…select-field

Merge remote-tracking branch 'refs/remotes/callemall/next' into next-…

4157310

…select-field

muibot added PR: needs revision The pull request can't be merged. More details is available on the code review or fails in the CI PR: Needs Review and removed PR: Needs Review labels Apr 10, 2017

dummerbd mentioned this pull request Apr 14, 2017

[SelectField] Port to next WIP #6608

Closed

7 tasks

oliviertassinari added on hold There is a blocker, we need to wait and removed PR: Needs Review labels Apr 15, 2017

oliviertassinari removed the PR: needs revision The pull request can't be merged. More details is available on the code review or fails in the CI label Apr 15, 2017

oliviertassinari added the component: select This is the name of the generic UI component, not the React module! label Apr 15, 2017

oliviertassinari closed this Apr 20, 2017

nathanmarks mentioned this pull request Jun 7, 2017

[Select] Port component #4792

Closed

4 tasks

kybarg mentioned this pull request Jun 28, 2017

[SelectField] in alpha/next #7280

Closed

kybarg deleted the next-select-field branch August 1, 2017 15:01

kybarg mentioned this pull request Aug 2, 2017

[SelectField] Port SelectField component to v1 #7632

Closed

kybarg mentioned this pull request Aug 18, 2017

[SelectField] Port component #5716

Closed

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[SelectField] Port component #6301

[SelectField] Port component #6301

kybarg commented Mar 8, 2017 •

edited

Loading

avocadowastaken Mar 8, 2017 •

edited

Loading

avocadowastaken Mar 8, 2017

kybarg Mar 8, 2017

kybarg Mar 8, 2017 •

edited

Loading

avocadowastaken Mar 8, 2017

avocadowastaken Mar 8, 2017

kybarg Mar 8, 2017

oliviertassinari commented Mar 8, 2017

kybarg commented Mar 15, 2017

StevenACoffman Mar 15, 2017

oliviertassinari commented Mar 15, 2017

oliviertassinari commented Mar 26, 2017 •

edited

Loading

dummerbd commented Apr 14, 2017

dummerbd commented Apr 14, 2017

kybarg commented Apr 14, 2017

oliviertassinari commented Apr 15, 2017

oliviertassinari commented Apr 20, 2017

[SelectField] Port component #6301

[SelectField] Port component #6301

Conversation

kybarg commented Mar 8, 2017 • edited Loading

Desired functionality:

Overall progress

avocadowastaken Mar 8, 2017 • edited Loading

Choose a reason for hiding this comment

avocadowastaken Mar 8, 2017

Choose a reason for hiding this comment

kybarg Mar 8, 2017

Choose a reason for hiding this comment

kybarg Mar 8, 2017 • edited Loading

Choose a reason for hiding this comment

avocadowastaken Mar 8, 2017

Choose a reason for hiding this comment

avocadowastaken Mar 8, 2017

Choose a reason for hiding this comment

kybarg Mar 8, 2017

Choose a reason for hiding this comment

oliviertassinari commented Mar 8, 2017

kybarg commented Mar 15, 2017

StevenACoffman Mar 15, 2017

Choose a reason for hiding this comment

oliviertassinari commented Mar 15, 2017

oliviertassinari commented Mar 26, 2017 • edited Loading

dummerbd commented Apr 14, 2017

dummerbd commented Apr 14, 2017

kybarg commented Apr 14, 2017

oliviertassinari commented Apr 15, 2017

oliviertassinari commented Apr 20, 2017

kybarg commented Mar 8, 2017 •

edited

Loading

avocadowastaken Mar 8, 2017 •

edited

Loading

kybarg Mar 8, 2017 •

edited

Loading

oliviertassinari commented Mar 26, 2017 •

edited

Loading