From 8b5541b53a6aa959fd81236623f68deb5eafcd05 Mon Sep 17 00:00:00 2001 From: hamzamaimi <82286785+hamzamaimi@users.noreply.github.com> Date: Sun, 27 Oct 2024 11:57:22 +0100 Subject: [PATCH] Fix: updated regex validation for color theme designer input field MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Updated regex validation in order to allow only correct Hexadecimal value (only numbers from 0 to 9 and letters from A to F. Currently, when you enter incorrect hex values ​​in the theme designer, the rendering breaks and the entire theme designer disappears. --- .../theme-designer/src/components/Sidebar/Form.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/react-components/theme-designer/src/components/Sidebar/Form.tsx b/packages/react-components/theme-designer/src/components/Sidebar/Form.tsx index 1f85ac0a4d84a..cfeb05b497a32 100644 --- a/packages/react-components/theme-designer/src/components/Sidebar/Form.tsx +++ b/packages/react-components/theme-designer/src/components/Sidebar/Form.tsx @@ -117,9 +117,13 @@ export const Form: React.FC = () => { }, }); }, [dispatch, debounceKeyColor, debounceHueTorsion, debounceVibrancy]); - - const generateHexColor = (e: React.ChangeEvent) => - '#' + e.target.value.replace(/\W/g, '').toUpperCase(); + + const generateHexColor = (e: React.ChangeEvent): string => { + return '#' + e.target.value + .replace(/[^0-9A-F]/gi, '') + .toUpperCase(); + }; + const handleKeyColorChange = (e: React.ChangeEvent) => { // check if the newly inputted hex code has a # const newHexColor = generateHexColor(e);