Skip to content

Fix regression on keyboard navigation #61478

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
oandregal merged 2 commits into from
May 8, 2024
Merged

Fix regression on keyboard navigation #61478

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d4dd64a
Fix regression on keyboard navigation
oandregal May 8, 2024
5328230
Update packages/dataviews/src/view-list.tsx
oandregal May 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions packages/dataviews/src/view-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ interface ListViewProps {
}

interface ListViewItemProps {
id: string;
id: any;
Copy link
Member Author

@oandregal oandregal May 8, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's the proper type here?

Copy link
Contributor

@youknowriad youknowriad May 8, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

By reading the code it seems to be "string" but optional, so something like

Suggested change
id: any;
id?: string;

Copy link
Member

@gziolo gziolo May 8, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

string | undefined?

Copy link
Member

@sirreal sirreal May 8, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll add a bit of information, there's a subtle difference in what these two communicate:

// The property may not be present. If it is present it's a string
var x: { id?: string } = {};
var x2: { id?: string } = { id: undefined }; // TYPE ERROR!!
// The property _is_ present, `undefined` is an acceptable value. {} is not allowed here.
var y: { id: string | undefined } = { id: undefined };
var y2: { id: string | undefined } = {}; // TYPE ERROR!!

(Note that the x2 type error depends on exactOptionalPropertyTypes which I don't think we have enabled in Gutenberg right now. It's relatively new but likely a good thing to enable.)

At runtime we often treat these as the same, but they're also subtly different depending on the type of check we're doing:

const x = {}
x.y; // undefined
Object.hasOwn(x, 'y'); // false
'y' in x; // false

x.y = undefined;
// The value is the same but the property is there:
x.y; // undefined
Object.hasOwn(x, 'y'); // true
'y' in x; // true

item: Item;
isSelected: boolean;
onSelect: ( item: Item ) => void;
Expand Down Expand Up @@ -183,7 +183,8 @@ export default function ViewList( props: ListViewProps ) {
);

const getItemDomId = useCallback(
( item?: Item ) => ( item ? `${ baseId }-${ getItemId( item ) }` : '' ),
( item?: Item ) =>
item ? `${ baseId }-${ getItemId( item ) }` : undefined,
[ baseId, getItemId ]
);

Expand Down