CourtneyJ
CourtneyJ

Reputation: 508

Editing a selected item in an AsyncSelect

I Have a form with AsyncCreatable fields and they are clearable however the ask is that once a user has typed in some text and selected an item that the user should be able to go into the field and edit the value they'd typed in without having to retype the entire word. Ive been looking into the behavior of searchable selects and I can't find any evidence that this is possible. The only thing Ive found is typing into a field with a value already present empties the value and I can't find a workaround for this.

If anyone has run into this issue or has any advice about this issue please share!?

this is my component if it helps:

const asyncFields = ["chiefComplaint", "practiceName", "patientName", "chiefComplaint", "providerName"]
  const selectParamHandler = (
    item: { label: string; value: string }[] | { label: string; value: string },
    meta: { name: keyof typeof queryParams },
  ) => {
    if (asyncFields.includes(meta?.name) && item === null) {
      setSearchParamList("", meta.name);
    } else {
      let value = Array.isArray(item) ? item.map((el) => el.value) : item.value;
      setSearchParamList(value, meta.name);
    }
  };

 const loadOptions = async (text) => {

        let result: any = null
        if (text?.length > 1) {
            try {
                result = await api.Monitoring.searchFields(field, text)
            } catch (err) { }
        }

        const options = result?.data || []
        handleChange({ value: text, label: text }, { name: field })
        if (field === "providerName") {
            let apiOptions = options.map((item) => ({ value: item, label: item })) || []

            return apiOptions.length ? [providerOptions[0], ...apiOptions] : providerOptions
        } else {
            return options.map((item) => ({ value: item, label: item }))

        }

    }

 return (
        <AsyncCreatableSelect
            styles={customStyles}
            isMulti={false}
            loadOptions={loadOptions}
            onChange={onInputChange}
            value={selectedItem}
            isClearable
        />
    )

Upvotes: 1

Views: 368

Answers (0)

Related Questions