web-ridge/react-native-paper-autocomplete

The autocomplete package you wished for on all platforms (iOS, Android, web)

react-native-paper-autocomplete's Issues

Images

Support dense mode of input in multiple mode

Timeline

Hey @RichardLindhout, another awesome react-native-paper component as always. Just out of curiosity, do you have a rough time frame on when this might be out of beta and supported on all platforms? I'd be interested in using this down the road on a personal project.

Show whole list when user focused selected option

Show all items when input is focused and the text inside the value is the same as selected item

List of a few bugs

Hey! Awesome work getting this off the ground. I've been looking for something like this for a few weeks now and it's super exciting to see this repo pop up!

Just wanted to enumerate a few bugs I've noticed in very early testing. I will try to contribute to this project if I have time, but unfortunately, this area of my project is not high priority yet, so it may be some time before I can.

These were all discovered on a physical iOS device using managed Expo:

1. The list doesn't seem to open up adjacent to the input field, but rather in the top left corner of my page. Perhaps this has to do with nesting inside react-navigation screens? I'll test further soon and see if I can isolate the cause.
2. When using an "outlined" input type, the content of the input is flush with the left of the input field.
3. When using the "dense" prop, the caret isn't centered in the input field (it's a bit high).
4. When the list is open, an initial tap on the list is required, which closes the keyboard first, before any interactions can take place.

My current implementation is pretty plain:

<Autocomplete
  onChange={() => null}
  value={null}
  options={[
    { value: 1, label: 'test' },
    { value: 2, label: 'Pjotr Versjuurre' },
    { value: 3, label: 'Bjart von Klef' },
    { value: 4, label: 'Riesjard Lindhoe' },
  ]}
  inputProps={{
    placeholder: 'Select user',
    mode: 'outlined',
    dense: true,
  }}
/>

Sorry this isn't the most well-formatted bug report. It's very late here and I need to sleep; just wanted to share my findings before I turned in.

Best of luck with this project!

TypeError: undefined is not an object (evaluating 'InnerNativeModule.installCoreFunctions')

Is there something specific I need to do to get this working on Android. I'm getting the following errors. It's working great in iOS.

Add support for autocompletes without scrollable container

Support all react-native-paper text input modes

Make sure the padding and heights are right for other input modes like contained, flat etc

When having a selected value, focussing the field which is lower than the top scroll causes the X mark and dropdown items to pop up at the top of the scrollview

When having a selected value once, focussing the field which is lower than the top scroll causes the X mark and dropdown items to pop up at the top of the scrollview.

Image how it's supposed to work:

Image after selecting a value once and re-focussing:

When disabled it is still possible to use dropdown and clear button

When specifying disabled: true in inputProps, it should not be possible to use dropdown button and clear button in Autocomplete field

Remove selected value in single select if user removes all text

Add support for bottom sheet select on mobile platforms

Maybe let user opt in for bottom sheet support with something like. https://github.com/gorhom/react-native-bottom-sheet

When having the autocomplete focussed, it's impossible to scroll.

When having the autocomplete focussed, it's impossible to scroll.

Video:
https://youtu.be/0yGnSWfeleM

Expo

Does it work with expo? i couldn't run it

Wish to auto open dropdown if on typing or input text focusing

Hi, thanks for making this amazing stuff. Actually i'm working on react-native-paper and i'm like using react-native-paper-autocomplete in my project.

So just wish to auto open dropdown if on typing or input text focusing as my picture below.

Thanks!

Add support for custom scrollables

Add example website with list of examples

• async fetch example
• single
• multiple
• different input types

Don't show placeholder if input is not focused