Skip to content
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

Jump to bottom

Combobox/add custom element when suggestions not found #66142

Open
wants to merge 8 commits into
base: trunk
Choose a base branch
from
+7 −0
Open

Combobox/add custom element when suggestions not found #66142

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
bfb3f06
add experimental prop for rendering a custom component when no sugges…
vykes-mac Oct 15, 2024
7037c79
render custom no suggestion found element if provided and suggestions…
vykes-mac Oct 15, 2024
e945b6e
add storybook example
vykes-mac Oct 15, 2024
c824183
update readme file with prop
vykes-mac Oct 15, 2024
e12aec4
add changelog entry
vykes-mac Oct 15, 2024
0bc3703
remove extra prop and always show the items not found copy
vykes-mac Oct 16, 2024
16ca239
update changelog
vykes-mac Oct 16, 2024
edb25fd
remove the extra prop
vykes-mac Oct 16, 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
1 change: 1 addition & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@

- `Modal`: Modal dialog small improvement for elementShouldBeHidden ([#65941](https://github.com/WordPress/gutenberg/pull/65941)).
- `Tabs`: revamped vertical orientation styles ([#65387](https://github.com/WordPress/gutenberg/pull/65387)).
- `ComboboxControl`: display `No items found` when there are no matches found ([#66142](https://github.com/WordPress/gutenberg/pull/66142))
Copy link
Member

Choose a reason for hiding this comment

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

Looks like this also affects the FormTokenField component when the __experimentalExpandOnFocus prop is enabled.


## 28.9.0 (2024-10-03)

Expand Down
6 changes: 6 additions & 0 deletions packages/components/src/form-token-field/suggestions-list.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import type { MouseEventHandler, ReactNode } from 'react';
* WordPress dependencies
*/
import { useRefEffect } from '@wordpress/compose';
import { __ } from '@wordpress/i18n';

/**
* Internal dependencies
Expand Down Expand Up @@ -156,6 +157,11 @@ export function SuggestionsList<
);
/* eslint-enable jsx-a11y/click-events-have-key-events */
} ) }
{ suggestions.length === 0 && (
<li className="components-form-token-field__suggestion is-empty">
Copy link
Member

Choose a reason for hiding this comment

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

Were you planning on styling the is-empty modifier? I'm thinking we at least need to move the cursor style:

	&:not(.is-empty) {
		cursor: pointer;
	}

{ __( 'No items found' ) }
</li>
) }
</ul>
);
}
Expand Down
Loading