Skip to content

FormTokenField: fix filtering with full-width string #70232

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
Merged
merged 3 commits into from
May 28, 2025
Merged

FormTokenField: fix filtering with full-width string #70232

merged 3 commits into from
May 28, 2025

Conversation

t-hamano
Copy link
Contributor

@t-hamano t-hamano commented May 28, 2025 •
edited
Loading

Follow-up: #70180

What?

This PR normalizes user input from full-width characters to half-width characters internally.

Why?

In #70178, a process was added to normalize suggestions to half-width characters. This means that, for example, when searching for the half-width character string WordPress, it will match not only the half-width character string WordPress but also the full-width character string ＷｏｒｄＰｒｅｓｓ.

However, we did not normalize user input. As a result, when a user searches for the full-width character string ＷｏｒｄＰｒｅｓｓ, the full-width character string ＷｏｒｄＰｒｅｓｓ included in the suggestions will no longer match because it has already been normalized to half-width characters.

How?

  • Normalize user input from full-width characters to half-width characters
  • Add a unit test to prevent a regression

Testing Instructions

Make the following changes and launch the FormTokenField or ComboboxControl story:

diff --git a/packages/components/src/combobox-control/stories/index.story.tsx b/packages/components/src/combobox-control/stories/index.story.tsx
index f033742a33..bbbb126cf4 100644
--- a/packages/components/src/combobox-control/stories/index.story.tsx
+++ b/packages/components/src/combobox-control/stories/index.story.tsx
@@ -15,6 +15,8 @@ import ComboboxControl from '..';
 import type { ComboboxControlProps } from '../types';
 
 const countries = [
+       { name: 'WordPress', code: 'wp1' },
+       { name: 'ＷｏｒｄＰｒｅｓｓ', code: 'WP2' },
        { name: 'Afghanistan', code: 'AF' },
        { name: 'Åland Islands', code: 'AX' },
        { name: 'Albania', code: 'AL' },
diff --git a/packages/components/src/form-token-field/stories/index.story.tsx b/packages/components/src/form-token-field/stories/index.story.tsx
index 52daabe560..7e86f7927b 100644
--- a/packages/components/src/form-token-field/stories/index.story.tsx
+++ b/packages/components/src/form-token-field/stories/index.story.tsx
@@ -35,6 +35,8 @@ const meta: Meta< typeof FormTokenField > = {
 export default meta;
 
 const continents = [
+       'WordPress',
+       'ＷｏｒｄＰｒｅｓｓ',
        'Africa',
        'America',
        'Antarctica',

Or add WordPress and ＷｏｒｄＰｒｅｓｓ as post tags and open the post sidebar.

  • Input the full-width character string Ｗｏｒｄ.
  • Both WordPress and ＷｏｒｄＰｒｅｓｓ should match.
  • The Word or Ｗｏｒｄ part should be in bold.

Screenshots or screencast

Before After
image image

@t-hamano t-hamano self-assigned this May 28, 2025
@t-hamano t-hamano added [Type] Bug An existing feature does not function as intended [Package] Components /packages/components labels May 28, 2025
@t-hamano t-hamano mentioned this pull request May 28, 2025
Merged
@t-hamano t-hamano requested review from Mamaduka and a team May 28, 2025 11:08
@t-hamano t-hamano force-pushed the form-token-field-full-width-search branch from 7c8cfc1 to d6405d4 Compare May 28, 2025 11:09
@t-hamano t-hamano marked this pull request as ready for review May 28, 2025 11:10
@t-hamano t-hamano requested a review from ajitbohra as a code owner May 28, 2025 11:10
@github-actions GitHub Actions
Copy link

github-actions bot commented May 28, 2025 •
edited
Loading

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Mamaduka
Mamaduka approved these changes May 28, 2025
View reviewed changes
Copy link
Member

@Mamaduka Mamaduka left a comment

Choose a reason for hiding this comment

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

Thanks, @t-hamano!

@Mamaduka Mamaduka merged commit fc0c798 into trunk May 28, 2025
73 of 74 checks passed
@Mamaduka Mamaduka deleted the form-token-field-full-width-search branch May 28, 2025 15:08
@github-actions github-actions bot added this to the Gutenberg 21.0 milestone May 28, 2025
chriszarate pushed a commit to chriszarate/gutenberg that referenced this pull request Jul 1, 2025
@t-hamano @Mamaduka @chriszarate
FormTokenField: fix filtering with full-width string (WordPress#70232)
9c16b8e 
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Mamaduka Mamaduka Mamaduka approved these changes

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

Assignees

@t-hamano t-hamano

Labels
[Package] Components /packages/components [Type] Bug An existing feature does not function as intended
Projects
None yet
Milestone
Gutenberg 21.0
Development

Successfully merging this pull request may close these issues.
2 participants
@t-hamano @Mamaduka