Values are missing in the dropdown when its on Searching

[Gopi]

Hi team,

I am using Crayons Select for one of the projects.

My use case is I need to search in the dropdown once the user entered the search terms I will make an API call and I will display the results.

Once the results are displayed the searched values are missing in the dropdown. The values should not get cleared after getting the result.

Kindly share with me the solution to solve this issue.

My code is:
<FwSelect
label=“Project”
required={true}
placeholder=“Select Project”
onFwChange={(e) => {
handleProjectChange(e.target.value);
}}
search={(e) => {
searchProjects(e);
}}
options={projectOptions}
>

Thanks & Regards,
Gopi

[Gopi]

Hi Team,

Any updates on this?

Thanks & Regards,
Gopi

[vangakirankumarreddy]

Hi Gopi,

Can you please let me know the crayons version which you are using?

[Gopi]

Hi @vangakirankumarreddy ,

I am currently using 4.2.0-beta.1 version of crayons.

[vangakirankumarreddy]

Hi Gopi, I have tested with the below snippet, let me know if its works for you. Used Promises to replicate the fetch behavior

import React from 'react'
import {FwSelect} from '@freshworks/crayons/react'

const characters = [
  {
    id: 1,
    name: 'John Doe',
    age: 30,
    occupation: 'Engineer',
    graphicsProps: {
      image: 'https://rickandmortyapi.com/api/character/avatar/1.jpeg',
    },
    value: '1',
  },
  {
    id: 2,
    name: 'Jane Smith',
    age: 25,
    occupation: 'Designer',
    graphicsProps: {
      image: 'https://rickandmortyapi.com/api/character/avatar/1.jpeg',
    },
    value: '2',
  },
  {
    id: 3,
    name: 'Michael Johnson',
    age: 40,
    occupation: 'Manager',
    graphicsProps: {
      image: 'https://rickandmortyapi.com/api/character/avatar/1.jpeg',
    },
    value: '3',
  },
  {
    id: 4,
    name: 'Emily Brown',
    age: 28,
    occupation: 'Developer',
    graphicsProps: {
      image: 'https://rickandmortyapi.com/api/character/avatar/1.jpeg',
    },
    value: '4',
  },
  {
    id: 5,
    name: 'William Lee',
    age: 35,
    occupation: 'Writer',
    graphicsProps: {
      image: 'https://rickandmortyapi.com/api/character/avatar/1.jpeg',
    },
    value: '5',
  },
  {
    id: 6,
    name: 'Rick Sanchez',
    subText: 'Human',
    graphicsProps: {
      image: 'https://rickandmortyapi.com/api/character/avatar/1.jpeg',
    },
    value: '6',
  },
]

// Simulate an API call to search for characters based on a search query
function searchCharacters(query) {
  return new Promise((resolve, reject) => {
    // Simulate API delay with setTimeout
    setTimeout(() => {
      // Filter characters based on the search query
      const filteredCharacters = characters.filter((character) =>
        character.name.toLowerCase().includes(query.toLowerCase()),
      )

      resolve(filteredCharacters)
    }, 1000) // Simulate 1-second delay
  })
}

function Select() {
  const searchFn = (value) => {
    return searchCharacters(value)
      .then((result) => {
        console.log(result)
        return result.map((x) => {
          return {
            ...x,
            text: x.name,
            subText: x.type,
            graphicsProps: {image: x.image},
          }
        })
      })
      .catch((error) => {
        console.error(error)
      })
  }
  return (
    <FwSelect
      id="dynamicSelect"
      label={'Rick & Morty Characters'}
      noDataText="Type to search.."
      notFoundText="Not available in this universe"
      placeholder="Your choices"
      hintText="Select multiple options"
      optionsVariant="avatar"
      tagVariant="avatar"
      search={searchFn}
      multiple
      selectedOptions={[
        {
          text: 'Rick Sanchez',
          subText: 'Human',
          value: '6',
          graphicsProps: {
            image: 'https://rickandmortyapi.com/api/character/avatar/1.jpeg',
          },
        },
      ]}
    ></FwSelect>
  )
}
export default Select