[React (Preact)] Combox and Combobox.Label not being associated properly

[michael-langley]

I am using Combox in a Preact application and I am noticing that the Combobox and the Combobox.Label are not being associated correctly. Has anyone run across this?

Here is what gets rendered -- notice there is no for on the label, and the input labelled-by is incorrect as it does not match the label id

Here is how I am implementing this code

 <Combobox value={value} onChange={onChange} disabled={disabled}>
      <div className={cx('relative', className)}>
        <div className={getContainerStyle({ error, disabled })}>
          <Combobox.Input
            id={id}
            displayValue={(option: SelectOption) => option?.label ?? query}
            onChange={(event) => onInput(event.target.value)}
            className={getInputStyle({ hasFloatingLabel: !!label })}
            //@ts-ignore
            onFocus={() => setFocused(true)}
            //@ts-ignore
            onBlur={() => setFocused(false)}
            disabled={disabled}
            {...(error && {
              'aria-invalid': true,
              'aria-describedby': `error-message-${errorMessageId}`,
            })}
            {...inputProps}
          />
          {label && <Combobox.Label className={getLabelStyle({ isFloating, disabled })}>{label}</Combobox.Label>}
        </div>
        <Transition
          as={Fragment}
          enter="transition ease-out duration-200"
          enterFrom="opacity-0 -translate-y-3"
          enterTo="opacity-100 translate-y-0"
          leave="transition ease-in duration-200"
          leaveFrom="opacity-100 translate-y-0"
          leaveTo="opacity-0 -translate-y-3"
        >
          <Combobox.Options className={getSelectMenuStyle()}>
            {loading && renderLoadingOption()}
            {filteredItems.length === 0 && query === '' && !loading && renderSearchOption()}
            {filteredItems.length === 0 && query !== '' && !loading && renderNoResultsFoundOption()}
            {!loading && filteredItems.length > 0 && filteredItems.map(renderOption)}
          </Combobox.Options>
        </Transition>
        {error && (
          <p id={`error-message-${errorMessageId}`} className={getErrorMessageStyle()}>
            {error}
          </p>
        )}
      </div>
    </Combobox>