Why does IFocusZoneProps extend React.HTMLAttributes<HTMLElement | FocusZone>?

[Teemu Vartiainen (Sentri)]

Hello,

Why does the IFocusZoneProps interface extend React.HTMLAttributes<HTMLElement | FocusZone> instead of just plain React.HTMLAttributes<HTMLElement>?

fluentui/packages/react-focus/src/components/FocusZone/FocusZone.types.ts

Line 46 in ac24a6a

export interface IFocusZoneProps extends React.HTMLAttributes<HTMLElement | FocusZone> {

This makes it so to react to events like onKeyDown we have to implement a type guard or some kind of a cast downstream to get to the target HTMLElement value. It seems like when the props are called in the code, the argument is always a React.KeyboardEvent<HTMLElement>, and never FocusZone.

See here:

fluentui/packages/react-focus/src/components/FocusZone/FocusZone.tsx

Line 591 in ac24a6a

this.props.onKeyDown(ev);

fluentui/packages/react-focus/src/components/FocusZone/FocusZone.tsx

Line 475 in ac24a6a

onFocus(ev);

The others are just passed into the HTML element:

fluentui/packages/react-focus/src/components/FocusZone/FocusZone.tsx

Line 262 in ac24a6a

{...divProps}

So why include | FocusZone in the type?

[Justin Slone (JustSlone)]

Makoto Morimoto (@khmakoto) may be able to help answer this

[Makoto Morimoto (khmakoto)]

I'm not sure of the historical reasons for this but it seems like we could remove that type?

What do you think David Zearing (@dzearing)?

[Makoto Morimoto (khmakoto)]

So, after speaking offline with David Zearing (@dzearing) and drilling into @types/react this seems safe to remove. I'll spin up a PR soon and update here when I do.

[Makoto Morimoto (khmakoto)]

Ok, this is going to be fixed in #16952.

Let us know if there is anything else I can help you with.

[Teemu Vartiainen (Sentri)]

Awesome! Thank you.