Validate new categories on input #198
Conversation
wp-modules/editor/js/src/components/SidebarPanels/CategoriesPanel.tsx
Outdated
Show resolved
Hide resolved
|
Looks good, I'll review this late today if that's alright. |
| const [ categoryTitleIsInvalid, setCategoryTitleIsInvalid ] = | ||
| useState( false ); |
There was a problem hiding this comment.
I couldn't think of a simple way to show the modified style (the styles prop in Creatable below) without using state.
| @@ -0,0 +1,15 @@ | |||
| const defaultPattern = new RegExp( /([^a-z0-9 -]+)/gi ); | |||
There was a problem hiding this comment.
defaultPattern (and its usage as a default param) might be unneeded, but I like how simple it is to test.
There was a problem hiding this comment.
Haha, you knew I'd comment on that! 🤣
Good enough reason to keep defaultPattern
| @@ -0,0 +1,15 @@ | |||
| const defaultPattern = new RegExp( /([^a-z0-9 -]+)/gi ); | |||
There was a problem hiding this comment.
Haha, you knew I'd comment on that! 🤣
Good enough reason to keep defaultPattern
| @@ -64,12 +75,29 @@ export default function CategoriesPanel( { | |||
| } | |||
| ); | |||
| } } | |||
| onInputChange={ ( event ) => { | |||
| setCategoryTitleIsInvalid( | |||
| !! checkIllegalChars( event ) | |||
There was a problem hiding this comment.
Maybe checkIllegalChars() could return a boolean, so it doesn't need !! in front of it here.
There was a problem hiding this comment.
That's a good suggestion! Updated with 0e133b2.
There was a problem hiding this comment.
Updated the name to hasIllegalChars for that function as well. It is a much more descriptive name for this usage.
There was a problem hiding this comment.
0e133b2 looks good! Good idea for hasIllegalChars().
| const [ categoryTitleIsInvalid, setCategoryTitleIsInvalid ] = | ||
| useState( false ); |
| menuPlacement="auto" | ||
| styles={ { | ||
| menu: ( base ) => ( { | ||
| ...base, | ||
| zIndex: 100, | ||
| } ), | ||
| control: ( baseStyles ) => ( { | ||
| ...baseStyles, | ||
| borderColor: categoryTitleIsInvalid |
There was a problem hiding this comment.
Really nice handling.
You can still create a category with the valid characters, but you know something's invalid:
| [ | ||
| 'String !#@$% with ^&*() separated \'"? illegal []{}|/ chars', | ||
| [ '!#@$%', '^&*()', '\'"?', '[]{}|/' ], | ||
| ], |
Tasks
Summary of changes
Previously, typing certain characters could cause issues (up to a whitescreen) when new categories were created in the sidebar UI. This PR adds strict validation as the user types, then strips disallowed characters on
Enter.Related Issues
How to test
EnterNotes & Screenshots
A hint is provided by a red border that only appears when disallowed chars are detected. Additionally, the
Create ""label shown below the input as the new category title is typed has the disallowed characters stripped: