Prevent Select options body from closing on onClick

[sou-gabriel]

Hey guys! I have an impediment in the construction of a Select component. It is a Select with infinite scrolling and I need to provide the user with a search option, since the data is populated little by little - as the user scrolls. When I access the application on a desktop, everything behaves as expected, but when I access my web application on a mobile device, every time I focus on the text box, the Select menu closes. Is there any property that can help me to write that when it detects a click on the options menu, I cut this default behavior of closing it?

Gravacao.de.Tela.2023-04-27.as.16.43.40.mov

My component looks something like this:

export const InfiniteSelect = ({
  defaultValue,
  options,
  hasNextPage = false,
  onSearch,
  onLoadMoreOptions,
  onValueChange,
}: InfiniteSelectProps) => {
  const [isOpen, setIsOpen] = useState(false)
  const [triggerWidth, setTriggerWidth] = useState<number>()
  const [searchTerm, setSearchTerm] = useState('')
  const [filteredOptions, setFilteredOptions] = useState(options)
  const menuContainerRef = useRef(null)
 
  // ...

  return (
    <SelectPrimitive.Root
      open={isOpen}
      onOpenChange={setIsOpen}
      onValueChange={onValueChange}
      defaultValue={defaultValue}
    >
      <SelectPrimitive.Trigger asChild>
        <button
          className="flex items-center justify-between w-full p-3 text-xs rounded-lg outline-none border-grey-500 border-1 text-grey-800 placeholder:text-grey-500 disabled:bg-grey-300 disabled:text-grey-500 lg:py-4 lg:text-sm"
          ref={(node) => node && setTriggerWidth(node.offsetWidth)}
        >
          <SelectPrimitive.Value />
          <SelectPrimitive.Icon>
            {isOpen ? <ChevronUpIcon /> : <ChevronDownIcon />}
          </SelectPrimitive.Icon>
        </button>
      </SelectPrimitive.Trigger>

      <SelectPrimitive.Portal>
        <SelectPrimitive.Content
          position="popper"
          sideOffset={4}
          className="z-50 overflow-hidden border rounded-md border-primary-light"
          style={{ width: triggerWidth || undefined }}
        >
          <SelectPrimitive.Viewport className="bg-white shadow-lg">
            <SelectPrimitive.Group>
              <div>
                <div className="p-2">
                  <div className="relative w-full">
                    <input
                      type="text"
                      value={searchTerm}
                      placeholder="Buscar pelo asset"
                      className="w-full p-3 pr-6 text-xs rounded-lg outline-none placeholder:text-xs h-11 lg:pr-12 border-grey-500 border-1 text-grey-800 placeholder:text-grey-500 disabled:bg-grey-300 disabled:text-grey-500 lg:py-4 lg:text-sm"
                      onKeyDown={(e) => e.stopPropagation()}
                      onChange={(e) => setSearchTerm(e.target.value)}
                    />

                    <button
                      type="button"
                      className="absolute p-[6px] -translate-y-1/2 rounded-full w- bg-secondary-dark right-2 top-1/2"
                      onClick={() => onSearch(searchTerm)}
                    >
                      <MagnifyingGlass color="#fff" size={16} />
                    </button>
                  </div>
                </div>

                <div
                  className="relative overflow-y-scroll max-h-44 md:max-h-[190px]"
                  ref={menuContainerRef}
                >
                  {filteredOptions?.length === 0 ? (
                    <p className="flex items-center justify-center h-16 text-xs font-semibold text-center opacity-50 md:text-sm text-grey-700">
                      Nenhum registro encontrado
                    </p>
                  ) : (
                    <>
                      {filteredOptions?.map(({ label, value }) => {
                        return (
                          <SelectPrimitive.Item
                            key={value}
                            value={String(value)}
                            onClick={(event) => event.stopPropagation()}
                            className={clsx(
                              'data-[state="checked"]:bg-primary-light h-fit min-h-[40px] font-normal data-[state="checked"]:font-medium data-[state="checked"]:text-white relative flex items-center px-4 py-3 text-xs md:text-sm text-gray-700 ',
                              'radix-disabled:opacity-50',
                              'focus:outline-none cursor-pointer'
                            )}
                          >
                            <SelectPrimitive.ItemText>
                              {label}
                            </SelectPrimitive.ItemText>
                          </SelectPrimitive.Item>
                        )
                      })}
                    </>
                  )}
                </div>
              </div>
            </SelectPrimitive.Group>
          </SelectPrimitive.Viewport>
        </SelectPrimitive.Content>
      </SelectPrimitive.Portal>
    </SelectPrimitive.Root>
  )
}

[benoitgrelard]

Hey @sou-gabriel,

The select isn't meant to support an input like this to filter really.
You will likely encounter accessibility issues by doing so.
It looks like you are after a #1342 instead?

[sou-gabriel]

Oh, really the combobox seems like a better option. Thank you for your support!