Fix FormTokenField suggestions broken scrollbar when __experimentalExpandOnFocus is defined

[talldan]

Fixes #56419

What?

Fixes an issue with FormTokenField whereby when the __experimentalExpandOnFocus prop is defined, the suggestions list can't be scrolled by dragging it with the mouse.

How?

The issue seemed to be that the isExpanded prop was being repeatedly switched between true and false. This remounting of the suggestions was causing the scroll position to be fixed in place.

Notably the onFocusHandler handler checks both input focus and container focus, while the onBlur handler didn't, so the fix was to replicate that in onBlur to prevent isExpanded being set to false.

(note: I'm not sure if this is a good enough explanation, as I don't know why it works ok normally 😄 ).

Testing Instructions

1. Pop open the storybook at the FormTokenField component (https://wordpress.github.io/gutenberg/?path=/docs/components-formtokenfield--docs)
2. Enable __experimentalExpandOnFocus
3. Click on the input and try scrolling the suggestions by dragging on the scrollbar

Testing Instructions for Keyboard

I don't think this is reproducible using the keyboard

Screenshots or screencast

Before

Kapture.2023-11-22.at.18.18.29.mp4

After

Kapture.2023-11-22.at.18.14.58.mp4

[talldan]

I have this obtuse typescript error that I'll need some help resolving!

packages/components/src/form-token-field/index.tsx:662:5 - error TS2322: Type '{ onChange: ((event: { value: string; }) => void) | undefined; ref: RefObject<HTMLInputElement>; instanceId: number; autoCapitalize: string | undefined; ... 7 more ...; selectedSuggestionIndex: number; }' is not assignable to type 'Omit<Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof InputHTMLAttributes<...>>, "children" | ... 1 more ... | keyof TokenInputProps>'.
  Types of property 'onBlur' are incompatible.
    Type '(event: FocusEvent) => void' is not assignable to type 'FocusEventHandler<HTMLInputElement>'.
      Types of parameters 'event' and 'event' are incompatible.
        Type 'FocusEvent<HTMLInputElement, Element>' is missing the following properties from type 'FocusEvent': detail, view, which, initUIEvent, and 11 more.

662    <TokenInput

[t-hamano]

Just wanted to let you know that with this PR, #50514 can also be closed.

[glendaviesnz]

This tested well for me. I pushed a fix for the type issue, but probably needs someone with more experience with the components typing to take a look at it. It seems like the onFocus method is expecting the native FocusEvent but onBlur the react event version - but not sure why this is.

[aaronrobertshaw]

It seems like the onFocus method is expecting the native FocusEvent but onBlur the react event version - but not sure why this is.

At a quick glance, the focus and key down/up handlers are applied to the wrapping div rather than the input.

[ciampo]

Thank you for finding this bug and working on a solution! It's interesting that the only way to reproduce seems to be to click and drag the scrollbar — using the keyboard or the mousewheel seems to work fine.

Anyway, the changes are testing well for me (tested in Chrome/Safari/Firefox on MacOS).

I have this obtuse typescript error that I'll need some help resolving!

This definitely bit me in the past — FocusEvent and React.FocusEvent!

It seems like the onFocus method is expecting the native FocusEvent but onBlur the react event version - but not sure why this is.

I took a look and I believe that both the onFocus prop and the onFocusHandler also should be typed using ReactFocusEvent (instead of the native one). I logged the event object and it definitely looks like a react synthetic event.

[talldan]

I took a look and I believe that both the onFocus prop and the onFocusHandler also should be typed using ReactFocusEvent (instead of the native one). I logged the event object and it definitely looks like a react synthetic event.

Thanks for the feedback Marco, good catch! I've updated that now.

[glendaviesnz]

Tested well for me, and scrolling categories works with scroll wheel and when dragging scrollbar.

Looks good to go once changelog conflict resolved.