Possible Non-empty state ▶️ empty state combobox bug

[brianhumphreys]

Hey folks 👋 I'm currently having an issue with combo boxes. I have a situation where a single select combo box with a selected item can change state from a non-empty state to an empty state without user input. This happens when I have a list of combo box selections and the last one is empty and I delete one of the rows above the empty combo box. Ideally, in this case, the 3rd combo box would unmount and the second would assume the empty state. Of course this is happening as a result of external (non-user) interactions from the 2nd combo-box's perspective. The result I am currently seeing is that the state of the combo box is indeed empty (selectedItem is null and inputValue is empty string), but the text in the combobox is still showing the text that was present before the state changed. I have tried everything I can from a paste-user perspective, I am wondering if this is possibly a bug within paste?

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Combobox: strange behaviour in testing since Paste v15.3.0 - Answer (updated: 11/16/2022, similarity score: 86%)
• Combobox not able to clear value when used as controlled component - Answer (updated: 08/10/2022, similarity score: 85%)
• Combobox when fail to retrieve dropdown content - Answer (updated: 06/28/2022, similarity score: 84%)

[brianhumphreys]

This is the code I am using for these boxes:

const PropertyName = <T extends Option>({
  isEditable,
  groupOptions,
  selected,
  options,
  onSelect,
  onReset
}: ConditionPropertyProps<T>) => {
  const [currentInputValue, setCurrentInputValue] = useState('')

  useEffect(() => {
    if (!selected) {
      setCurrentInputValue('')
    }
  }, [selected])

  const handleSelectedItemChange = (changes: UseComboboxStateChange<T>) => {
    if (selected) {
      onReset()
    }
    onSelect(changes)
  }

  const itemToString = (item: T) => {
    return isSchemaUserEventKey(item) ? item.propertyName : item.name
  }

  const optionTemplate = (item: T) => {
    const title = isSchemaUserEventKey(item) ? item.propertyName : item.name
    const description = isSchemaUserEventKey(item) ? '' : item.dataType
    return <DescriptiveDropdownItem title={title} description={description} />
  }

  const getItems = () => {
    if (currentInputValue === (selected && 'name' in selected ? selected.name : selected?.propertyName)) {
      return options
    }

    if (currentInputValue !== undefined) {
      return options.filter(item =>
        isSchemaUserEventKey(item)
          ? item.propertyName.toLowerCase().includes(currentInputValue.toLowerCase())
          : item.name.toLowerCase().includes(currentInputValue.toLowerCase())
      )
    }

    return []
  }

  const getSelectedItem = useCallback(() => {
    return (
      options.find(
        item =>
          selected &&
          ((isSchemaUserEventKey(selected) &&
            isSchemaUserEventKey(item) &&
            item.propertyName === selected.propertyName) ||
            (!isSchemaUserEventKey(selected) && !isSchemaUserEventKey(item) && item.name === selected.name))
      ) ?? null
    )
  }, [selected, options])

  return (
    <Combobox
      data-testid="property-name-select"
      disabled={!isEditable}
      autocomplete={true}
      items={getItems()}
      itemToString={itemToString}
      placeholder={`property`}
      groupItemsBy={groupOptions ? 'propertyType' : undefined}
      selectedItem={getSelectedItem()}
      optionTemplate={optionTemplate}
      insertBefore={<FilterIcon decorative={true} />}
      labelText=""
      onSelectedItemChange={handleSelectedItemChange}
      inputValue={currentInputValue}
      onInputValueChange={({ inputValue }) => setCurrentInputValue(inputValue ?? '')}
    />
  )
}

[dosubot[bot]]

To address the issue you're experiencing with the Combobox component not updating its inputValue as expected, it's recommended to use the useComboboxPrimitiveState hook from the Paste design system. This approach provides more control over the Combobox component's state, including selectedItem and inputValue, and offers methods like selectItem and reset for managing state changes more effectively.

Here's a revised version of your PropertyName component utilizing the useComboboxPrimitiveState hook:

import {useComboboxPrimitiveState} from '@twilio-paste/combobox-primitive';

const PropertyName = <T extends Option>({
  isEditable,
  groupOptions,
  selected,
  options,
  onSelect,
  onReset
}: ConditionPropertyProps<T>) => {
  const comboboxState = useComboboxPrimitiveState({
    items: options,
    onSelectedItemChange: ({selectedItem}) => {
      if (selected) {
        onReset();
      }
      onSelect(selectedItem);
    },
    itemToString: (item: T) => {
      return isSchemaUserEventKey(item) ? item.propertyName : item.name;
    },
  });

  return (
    <Combobox
      data-testid="property-name-select"
      disabled={!isEditable}
      autocomplete={true}
      items={getItems()}
      itemToString={itemToString}
      placeholder={`property`}
      groupItemsBy={groupOptions ? 'propertyType' : undefined}
      selectedItem={getSelectedItem()}
      optionTemplate={optionTemplate}
      insertBefore={<FilterIcon decorative={true} />}
      labelText=""
      onSelectedItemChange={comboboxState.selectItem}
      inputValue={comboboxState.inputValue}
      onInputValueChange={comboboxState.setInputValue}
    />
  );
};

In this setup, onSelectedItemChange and onInputValueChange are directly linked to the selectItem and setInputValue methods provided by the useComboboxPrimitiveState hook, ensuring that the component's state is accurately managed.

Please try integrating this solution into your project. If the issue persists, consider providing a minimal reproduction in a CodeSandbox to further diagnose and address the problem.

Sources

• Multiselect Combobox issue
• Combobox's inputValue not changing with rerender
• Combobox not able to clear value when used as controlled component
• packages/paste-core/components/combobox/src/singleselect/Combobox.tsx
• packages/paste-core/components/combobox/tests/virtualization.spec.tsx
• packages/paste-core/components/combobox/src/ComboboxItems.tsx

About Dosu

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[brianhumphreys]

import { useComboboxPrimitiveState } from '@twilio-paste/combobox-primitive'

This import gives:

'@twilio-paste/combobox-primitive' import is restricted from being used by a pattern. All imports from paste should come from either core or the icons package. Please reach out to the App foundations team if the package you are seeking doesn't exist

I tried importing from core, but it doesn't exist as an exported member:

import { useComboboxPrimitiveState } from '@twilio-paste/core/combobox-primitive'

gives error:

'"@twilio-paste/core/dist/combobox-primitive"' has no exported member named 'useComboboxPrimitiveState'. Did you mean 'UseComboboxPrimitiveState'?

[brianhumphreys]

I attempted the AI chat bot response help but I still need help with this issue

[serifluous]

Hey @brianhumphreys ! Our engineering team will take a look at this and get back to you in a bit. Thanks for trying out the bot recommendation!

[TheSisb]

@brianhumphreys Could you make a minimal reproduction on Codesandbox please? I'm having a hard time understanding the flow here. At a glance, if I somewhat understood, you may either be fighting controlled vs uncontrolled inputs or you may need to add a key={} to your comboboxes if the react reconciler is confusing them.

[brianhumphreys]

giving a minimal repro would be quite difficult since it deals with state on a certain configuration of comboboxes. Here is a full demo of what is happening:

Screen.Recording.2024-04-10.at.1.42.58.PM.mov

Here is a link to the component: https://github.com/segmentio/app/blob/main/packages/app/client/components/Customers/Audiences/EntitiesBuilder/PropertyName.tsx#L26

[TheSisb]

Yeah you may want to try applying different keys on each combobox. Let me know if that works.

I don't have access to that repo, unfortunately.

[brianhumphreys]

Adding the key did wonders. Thanks @TheSisb

[brianhumphreys]

Yeah you may want to try applying different keys on each combobox. Let me know if that works.

I don't have access to that repo, unfortunately.