Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[iOS] cannot delete characters after a selection: 3.1.5 is broken #124

Open
vricosti opened this issue Apr 12, 2024 · 3 comments
Open

[iOS] cannot delete characters after a selection: 3.1.5 is broken #124

vricosti opened this issue Apr 12, 2024 · 3 comments

Comments

@vricosti
Copy link

vricosti commented Apr 12, 2024

I wanted to use this package to provide autocomplete feature and I have first tested the example where I have only modified the RemoteDataSetExample to simulate an api that complete a brand name when giving a string (ex SON => SONY).
Everything was OK.
Then I have tested exactly the same component RemoteDataSetExample inside my app and I have a weird behavior, I cannot delete the text once I have selected a suggestion, every time I delete a character it completes to the previous choice.

 /**
   * Simulates fetching brands from a backend that match a given prefix.
   * 
   * @param prefix The prefix to filter brands by.
   * @returns A promise that resolves with the filtered brands.
   */
  const ALL_BRANDS: string[] = [
    'SAMSUNG',
    'SONOS',
    'SONY',
    'SHARP',
  ];
  function simulateFetch(prefix: string): Promise<string[]> {
    return new Promise(resolve => {
      // Use setTimeout to simulate network delay
      setTimeout(() => {
        const filteredBrands = ALL_BRANDS.filter(brand =>
          brand.toUpperCase().startsWith(prefix.toUpperCase())
        );
        resolve(filteredBrands);
      }, 200); // Simulate a delay of 200 milliseconds
    });
  }

  const getSuggestions = useCallback(async (q: string) => {
    const filterToken = q.toLowerCase()
    console.log('getSuggestions', filterToken)
    if (typeof q !== 'string' || q.length < 2) {
      console.log(' setRemoteDataSet(null)')
      setRemoteDataSet(null)
      return
    }
    setLoading(true)
    const brands = await simulateFetch(q) as string[];
    const suggestions = brands.map((brand, index) => ({
        id: index.toString(),
        title: brand,
      }));

    setRemoteDataSet(suggestions)
    setLoading(false)
  }, [])

Here is a video showing the issue:

RPReplay_Final1712940886.mp4

UPDATE: I have checkout'ed the version 3.1.5 and tested and I am reproducing the bugs with the official example so conclusion current release is buggy.

RPReplay_Final1713004539.mp4

Could you please release the v4-rc version ?

@vricosti vricosti changed the title Weird behavior under iOS (real device) cannot delete characters after a selection [iOS] cannot delete characters after a selection: 3.1.5 is broken Apr 13, 2024
@onmotion
Copy link
Owner

Hi @vricosti thanks for reporting, you can try to install v4 with yarn add react-native-autocomplete-dropdown@next

@vricosti
Copy link
Author

vricosti commented Apr 13, 2024

yes it works but you should add a prop to disable theme styles because my application does not support it.
For now I can modify the background color:

inputContainerStyle={{
backgroundColor: '#e5ecf2',
}}

but how can I change the input text color ?

@onmotion
Copy link
Owner

textInputProps={{
placeholder: 'Type 3+ letters (dolo...)',
placeholderTextColor: '#aaa',
autoCorrect: false,
autoCapitalize: 'none',
style: {
borderRadius: 25,
backgroundColor: '#383b42',
color: '#fff',
paddingLeft: 18,
},
}}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants