Tab selection and shouldSelect not working when Input is not first child of Hint Component

Version

5.1.4

Steps to reproduce

Have a custom input with a label in renderInput method

       <Typeahead
              id={id}
              labelKey={labelKey}
              options={options}
              minLength={minLength}
              highlightOnlyResult={highlightOnlyResult}
              className={className}
              emptyLabel={emptyLabel}
              inputProps={{ 'aria-autocomplete': 'list', className: 'form-control', required }}
              onChange={(data) => onChange(data?.[0]?.[optionsValue])}
              inputRef={ref}
              defaultInputValue={defaultInputValue}
              renderInput={({ inputRef, referenceElementRef, ...inputProps }) => (
                <Hint shouldSelect={(shouldSelect, e) => e.keyCode === 9 || shouldSelect }>
                  <>
                    <InputTypeahead
                      id={id}
                      {...inputProps}
                      ref={(input) => {
                        inputRef(input);
                        referenceElementRef(input);
                      }}
                    />
                    <label className="form-control-placeholder" htmlFor={id}>
                      <span>{placeholder}</span>
                    </label>
                  </>
                </Hint>
              )}
              {...props}
            />

Expected Behavior

Item being selected when Tab key is pressed

Actual Behavior

Tab key actually moves to next item in DOM, without selecting any option

[ericgio]

Hey @daniel-carrillo-globant, thanks for the question. Hint expects a single child, and for that child to either be your input or to correctly handle the keydown handler it adds. You could try taking the current children and making them a component to do that:

const InputWithLabel = (props) => {
  return (
    <>
      <InputTypeahead
        ...
        onKeyDown={props.onKeyDown}  
      />
      <label ... >
        <span>...</span>
      </label>
    </>
  );
};

[daniel-carrillo-globant]

@ericgio Thank you for your really fast reply! I’ve actually just found a workaround in here, I used the useHint hook and created this component with the label in it:

const CustomHint = (props) => {
  const { child, hintRef, hintText } = useHint(props);
  const { id, placeholder } = props;
  return (
    <div
      style={{
        display: 'flex',
        flex: 1,
        height: '100%',
        position: 'relative',
      }}
    >
      {child}
      <label className="form-control-placeholder" htmlFor={id}>
        <span>{placeholder}</span>
      </label>
      <input
        aria-hidden
        className="rbt-input-hint"
        ref={hintRef}
        readOnly
        style={{
          backgroundColor: 'transparent',
          borderColor: 'transparent',
          boxShadow: 'none',
          color: 'rgba(0, 0, 0, 0.35)',
          left: 0,
          pointerEvents: 'none',
          position: 'absolute',
          top: 0,
          width: '100%',
        }}
        tabIndex={-1}
        value={hintText}
      />
    </div>
  );
};

And inside the renderInput method I’ve just called it this way:

          renderInput={({ inputRef, referenceElementRef, ...inputProps }) => (
                <CustomHint id={id} placeholder={placeholder}>
                  <InputTypeahead
                    id={id}
                    {...inputProps}
                    ref={(input) => {
                      inputRef(input);
                      referenceElementRef(input);
                    }}
                  />
                </CustomHint>
              )}

However, your response seems to be also accurate, I’ll try that one as well. Thank you very much!