React-bootstrap-typeahead: Tab selection and shouldSelect not working when Input is not first child of Hint Component

[daniel-carrillo-globant]

Actual Behavior

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

[daniel-carrillo-globant]

Hello @ericgio sorry for bothering, but I'd like some feedback in this request, there might be something I'm doing wrong. Thanks in advance

[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!

[gdibble]

Many thanks @ericgio && @daniel-carrillo-globant

[ericgio]

@daniel-carrillo-globant: Yep, your approach works well too! Glad you got it figured out.