Prevent A-Z a-z keyboard interaction for Listbox (Select)

[charklewis]

Is there a way I can programmatically prevent the keyboard interaction? I have a user experience where I use this dropdown with an option to add a new item to the list.

Here is a rough example so you can see what I mean:

<Listbox value={tag} onChange={addTag}>
      {({ open }) => (
        <>
          <Listbox.Label className="sr-only block text-sm font-medium text-gray-700">Add new tag</Listbox.Label>
          <div className="mt-1 relative">
            <Listbox.Button className="items-center text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 focus:outline-none">
              <PlusIcon className="h-6 w-6" aria-hidden="true" />
            </Listbox.Button>

            <Transition show={open} as={Fragment} leave="transition ease-in duration-100" leaveFrom="opacity-100" leaveTo="opacity-0">
              <Listbox.Options
                static
                className="absolute z-10 w-max right-0 border border-gray-200 bg-white dark:bg-gray-800 shadow-lg max-h-60 rounded-md py-1 text-base  overflow-auto focus:outline-none sm:text-sm"
              >
                  <div className="flex justify-between p-2 pt-0 my-1 border-b border-gray-300">
                    // I would like to prevent the ListBox keyboard interaction when a user clicks on this input
                    <input name="create-new-tag" className="focus:outline-none mr-1" placeholder="Type new tag..." />
                    <button className="text-xs justify-center p-2 rounded-lg shadow-sm font-medium text-white bg-blue-600 hover:bg-blue-700">
                      Create Tag
                    </button>
                  </div>
                {options.map(option => (
                  <Listbox.Option
                    key={option.value}
                    className={({ active }) =>
                      `select-none relative py-2 pl-3 pr-9 focus:outline-none cursor-pointer ${
                        active ? "bg-blue-500 text-white dark:text-white" : "text-gray-600 dark:text-gray-400 "
                      }`
                    }
                    value={option.value}
                  >
                    {() => <span className={"font-normal block truncate"}>{option.name}</span>}
                  </Listbox.Option>
                ))}
              </Listbox.Options>
            </Transition>
          </div>
        </>
      )}
    </Listbox>