feat: dropdown component #2530

omneimneh · 2021-01-27T08:40:55Z

Summary

This PR introduces a new component which is Dropdown and Dropdown.Option, I noticed that the native Picker in react-native isn't very customizable and doesn't look nice with other react-native-paper components.

I found other libraries on npm such as 'react-native-paper-dropdown' and 'react-native-material-dropdown' however I tested these libraries, they appear to have an issue displaying on the web, when developing this I went through the same problem because I was following their approach at first so I had to change a little bit.
I will try to explain it briefly:
If we want to create a dropdown in react (only web), we can use a div with relative position to parent by following this approach https://stackoverflow.com/a/5209833, however we will need to set the z-index to prevent other components down in the page to appear on top of the dropdown.
With react-native it's a little more complicated since all components by default have a relative position a a z-index preset to 0, so even if we increase the z-index of the dropdown we still can't make it appear above other components unless we change the z-index of the parent (and maybe other parents in the dom tree as well) https://stackoverflow.com/a/35326592.
The approach I took involved using a portal and computing the location of the dropdown when the user clicks on the component and displaying it, it works because the portal renders the dropdown at the top of the tree. But in this approach I assumed that the Provider component will provide the Protal.Host.

Test plan

I already provided an example in my PR, but I believe this is not ready to merge yet since there are tests and docs to add and maybe some refactoring required. Other features can be added as well like completely custom components (here I'm just using List.Item) and making the dropdown searchable... but I'll let you guys be the judge.

I'll keep updating the PR as much as I can until it's ready to merge and if anyone can also contribute with this it would be great

callstack-bot · 2021-01-27T08:47:58Z

Hey @omneimneh, thank you for your pull request 🤗. The documentation from this branch can be viewed here.

src/components/Dropdown/Dropdown.tsx

example/src/ExampleList.tsx

src/components/Dropdown/DropdownOption.tsx

omneimneh · 2021-02-20T19:02:22Z

@brunohkbx any updates on this? thanks 😃

brunohkbx · 2021-02-23T03:07:51Z

src/components/Dropdown/Dropdown.tsx

+   */
+  label?: string;
+  /**
+   * Required flag removes the possibility for the user to unselect a value once it's selected.


It's not clear to me how this prop works. I'm still able to change the selected option 🤔

So the idea is to remove the option that comes with a value of null, if required is set to false, the default null option will be shown as the first option in the dropdown, so to make a dropdown required you should give it a value and set required to true.

Sorry if the docs are not very clear, I will try to improve them as much as I can, and if you think we need to change the behavior we can maybe change the required prop to something like showUnselectOption or make it an iconButton at the right of the textInput instead I don't mind.

brunohkbx · 2021-02-23T03:08:39Z

src/components/Dropdown/Dropdown.tsx

+  /**
+   * This message will appear when the required prop is set to true and the number of children is zero.
+   */
+  emptyDropdownLabel?: string;


What do you think about adding an example with this?

brunohkbx · 2021-02-23T03:10:17Z

src/components/Dropdown/Dropdown.tsx

+const DEFAULT_EMPTY_DROPDOWN_LABEL = 'No available options';
+const DEFAULT_PLACEHOLDER_LABEL = 'Select an option';
+const DROPDOWN_NULL_OPTION_KEY = 'DROPDOWN_NULL_OPTION_KEY';
+// const DEFAULT_MAX_HEIGHT = Infinity;


Should we keep this?

Hmm, I'm not sure about what the material design guides indicate sorry that I don't have much knowledge about this, I was thinking in case we have a very long dropdown and when displaying this on the web (floating mode) on a large display that we may prefer to limit the height of the dropdown, that was my thoughts when I started working on it but I guess we don't need it anymore so I can remove it if you want

brunohkbx · 2021-02-23T03:11:07Z

src/components/Dropdown/Dropdown.tsx

+  {
+    children,
+    emptyDropdownLabel = DEFAULT_EMPTY_DROPDOWN_LABEL,
+    // maxHeight = DEFAULT_MAX_HEIGHT,


Do we need this?

brunohkbx · 2021-02-23T03:15:22Z

src/components/Dropdown/Dropdown.tsx

+) {
+  return React.Children.toArray(children)
+    .map((child) => (child as any)?.props)
+    .find((props) => props?.value === value);


I'm wondering if wouldn't be better to filter by the key here. just in case when someone uses the same value by mistake.

brunohkbx · 2021-02-23T03:21:32Z

src/index.tsx

@@ -44,7 +45,6 @@ export { default as Appbar } from './components/Appbar';
 export { default as TouchableRipple } from './components/TouchableRipple/TouchableRipple';
 export { default as TextInput } from './components/TextInput/TextInput';
 export { default as ToggleButton } from './components/ToggleButton';
-


No need to remove this line

brunohkbx · 2021-02-23T03:29:30Z

src/components/Dropdown/Dropdown.tsx

+  }, [children, selectedValue]);
+
+  React.useEffect(() => {
+    if (isMenuOpen) {


How about creating a custom hook for this? Something like useOrientations (maybe you can come up with a better name)
You can create it in two different files: useOrientations.native.js and useOrientations.js
just to clean up this a little

brunohkbx · 2021-02-23T03:33:18Z

@omneimneh I just realized that there's a missing top/bottom margin in the dropdown. Check it out:

From MD guide: https://material.io/components/menus#specs

brunohkbx · 2021-02-23T03:35:24Z

Also, can we support this error state?

brunohkbx · 2021-02-23T03:54:22Z

src/components/Dropdown/Dropdown.tsx

+   * A dropdown can be either be rendered inside a modal or inside a floating menu
+   * The default value is 'floating' if the platform is web and 'modal' otherwise
+   */
+  mode?: 'modal' | 'floating';


About this floating mode, shouldn't this be only available on web? I couldn't find anything in the MD docs regarding this https://material.io/components/menus

Sorry about that too, I wasn't sure what the correct behavior should be based on the material design guidelines, from what I saw there was only a "floating" mode (I didn't know what to call it) but the default Spinner of the android appears in a modal (or at least used too, it's been a long time since I used native android). Anyways we I can fix this as soon as we figure out what the correct behavior is.

I believe they call it exposed dropdown menu

github-actions · 2021-04-26T00:03:29Z

Hello 👋, this pull request has been open for more than 2 months with no activity on it. If you think this is still necessary with the latest version, please comment and ping a maintainer to get this reviewed, otherwise it will be closed automatically in 7 days.

avvari-da · 2021-05-03T20:18:02Z

@brunohkbx Hello, please let me know if this is going live

brunohkbx · 2021-05-06T12:23:07Z

hey @lukewalczak can you please take a look when you have some time?

RichardLindhout · 2021-06-04T18:03:01Z

I'm working on a similar component but I only tested it on the web for now but it will improve in the coming month:
https://github.com/web-ridge/react-native-paper-autocomplete

NahumG10 · 2021-12-12T00:38:07Z

How do I intall this component in my app? I'm using Expo

mggevaer · 2022-02-09T23:33:17Z

+1
I'm using react-native-paper and wanted to use a dropdown picker the Project as well, unfortunately did not find one with good web & react-native support as mentioned at the start of this PR. Looking for other solutions now.

Angelk90 · 2022-03-20T16:49:32Z

@lukewalczak , @omneimneh : Are there any news?

jigarzon · 2023-03-02T14:52:20Z

Any news on this PR?

fellenabmb · 2023-03-31T19:31:17Z

Any news on this one? 😄

H-pun · 2023-06-18T08:42:14Z

Any news on this?

omneimneh · 2023-09-27T10:06:51Z

Hello everyone, sorry for not being able to close this PR. A lot of things has changed with the material design M3 and it was very difficult to find a convenient time to work on this but I'll try to work on it in the upcoming days although I can't promise anything due to life/work commitments.
Sorry again for keeping this open for too long and thanks for understanding.

omneimneh · 2023-09-30T13:37:57Z

I moved this to a new PR #4102

omneimneh marked this pull request as ready for review January 27, 2021 08:50

omneimneh marked this pull request as draft January 27, 2021 08:54

omneimneh marked this pull request as ready for review January 31, 2021 13:19

feat: dropdown component

1cba183

omneimneh force-pushed the main branch from a9dce2c to 1cba183 Compare January 31, 2021 14:01

brunohkbx reviewed Feb 2, 2021

View reviewed changes

src/components/Dropdown/Dropdown.tsx Outdated Show resolved Hide resolved

src/components/Dropdown/Dropdown.tsx Outdated Show resolved Hide resolved

example/src/ExampleList.tsx Outdated Show resolved Hide resolved

src/components/Dropdown/DropdownOption.tsx Outdated Show resolved Hide resolved

omneimneh added 3 commits February 4, 2021 03:01

fix: working on the comments

ade8e09

fix: working on the comments

d02ea73

refactor: dropdown to functional component

1b23892

omneimneh force-pushed the main branch 6 times, most recently from eedefec to af51b5a Compare February 6, 2021 08:30

fix: docs

10b416e

omneimneh force-pushed the main branch 2 times, most recently from 9e56b77 to 97d02f9 Compare February 6, 2021 22:57

feat: floating dropdown

4702e5b

omneimneh force-pushed the main branch from 97d02f9 to 4702e5b Compare February 6, 2021 22:59

omneimneh added 4 commits February 9, 2021 09:54

handle dismiss

0117a96

lots of improvements

c20bf05

fixing tests

7c0daa6

small refactoring

f4bfa09

omneimneh requested a review from brunohkbx February 12, 2021 08:41

brunohkbx reviewed Feb 23, 2021

View reviewed changes

brunohkbx requested review from satya164 and Trancever February 23, 2021 03:38

brunohkbx reviewed Feb 23, 2021

View reviewed changes

github-actions bot added the Stale label Apr 26, 2021

brunohkbx added Keep opened waiting response and removed Stale labels May 6, 2021

brunohkbx requested a review from lukewalczak May 6, 2021 12:22

omneimneh closed this Sep 30, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: dropdown component #2530

feat: dropdown component #2530

omneimneh commented Jan 27, 2021 •

edited

Loading

callstack-bot commented Jan 27, 2021 •

edited

Loading

omneimneh commented Feb 20, 2021

brunohkbx Feb 23, 2021

omneimneh Feb 24, 2021

brunohkbx Feb 23, 2021

brunohkbx Feb 23, 2021

omneimneh Feb 24, 2021

brunohkbx Feb 23, 2021

brunohkbx Feb 23, 2021

brunohkbx Feb 23, 2021

brunohkbx Feb 23, 2021

brunohkbx commented Feb 23, 2021

brunohkbx commented Feb 23, 2021

brunohkbx Feb 23, 2021

omneimneh Feb 24, 2021 •

edited

Loading

omneimneh Feb 24, 2021

github-actions bot commented Apr 26, 2021

avvari-da commented May 3, 2021

brunohkbx commented May 6, 2021

RichardLindhout commented Jun 4, 2021

NahumG10 commented Dec 12, 2021 •

edited

Loading

mggevaer commented Feb 9, 2022

Angelk90 commented Mar 20, 2022

jigarzon commented Mar 2, 2023

fellenabmb commented Mar 31, 2023

H-pun commented Jun 18, 2023

omneimneh commented Sep 27, 2023

omneimneh commented Sep 30, 2023

feat: dropdown component #2530

feat: dropdown component #2530

Conversation

omneimneh commented Jan 27, 2021 • edited Loading

Summary

Test plan

callstack-bot commented Jan 27, 2021 • edited Loading

omneimneh commented Feb 20, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

brunohkbx commented Feb 23, 2021

brunohkbx commented Feb 23, 2021

Choose a reason for hiding this comment

omneimneh Feb 24, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Apr 26, 2021

avvari-da commented May 3, 2021

brunohkbx commented May 6, 2021

RichardLindhout commented Jun 4, 2021

NahumG10 commented Dec 12, 2021 • edited Loading

mggevaer commented Feb 9, 2022

Angelk90 commented Mar 20, 2022

jigarzon commented Mar 2, 2023

fellenabmb commented Mar 31, 2023

H-pun commented Jun 18, 2023

omneimneh commented Sep 27, 2023

omneimneh commented Sep 30, 2023

omneimneh commented Jan 27, 2021 •

edited

Loading

callstack-bot commented Jan 27, 2021 •

edited

Loading

omneimneh Feb 24, 2021 •

edited

Loading

NahumG10 commented Dec 12, 2021 •

edited

Loading