From 19987499e8e692725b0b0c3fd35d60e85f7f3b3f Mon Sep 17 00:00:00 2001 From: yash-rajpal Date: Thu, 16 Nov 2023 21:10:11 +0530 Subject: [PATCH 1/5] fix onBlur being over-written --- .../fuselage/src/components/AutoComplete/AutoComplete.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/fuselage/src/components/AutoComplete/AutoComplete.tsx b/packages/fuselage/src/components/AutoComplete/AutoComplete.tsx index f8b7e907f1..7409fa82a2 100644 --- a/packages/fuselage/src/components/AutoComplete/AutoComplete.tsx +++ b/packages/fuselage/src/components/AutoComplete/AutoComplete.tsx @@ -69,6 +69,7 @@ export function AutoComplete({ error, disabled, multiple, + onBlur: onBlurAction = () => {}, ...props }: AutoCompleteProps): ReactElement { const ref = useRef(); @@ -121,6 +122,11 @@ export function AutoComplete({ const [cursor, handleKeyDown, , reset, [optionsAreVisible, hide, show]] = useCursor(value, memoizedOptions, handleSelect); + const onBlur = useMutableCallback((event) => { + hide(); + onBlurAction(event); + }); + useEffect(reset, [filter]); return ( @@ -148,7 +154,7 @@ export function AutoComplete({ onChange={useMutableCallback((e) => setFilter(e.currentTarget.value) )} - onBlur={hide} + onBlur={onBlur} onFocus={show} onKeyDown={handleKeyDown} placeholder={ From 0c7fe06d99881bd40a32813a91d3f9513699641a Mon Sep 17 00:00:00 2001 From: yash-rajpal Date: Thu, 16 Nov 2023 22:54:48 +0530 Subject: [PATCH 2/5] change function name --- .../fuselage/src/components/AutoComplete/AutoComplete.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/fuselage/src/components/AutoComplete/AutoComplete.tsx b/packages/fuselage/src/components/AutoComplete/AutoComplete.tsx index 7409fa82a2..b4c1959e91 100644 --- a/packages/fuselage/src/components/AutoComplete/AutoComplete.tsx +++ b/packages/fuselage/src/components/AutoComplete/AutoComplete.tsx @@ -69,7 +69,7 @@ export function AutoComplete({ error, disabled, multiple, - onBlur: onBlurAction = () => {}, + onBlur: handleOnBlur = () => {}, ...props }: AutoCompleteProps): ReactElement { const ref = useRef(); @@ -124,7 +124,7 @@ export function AutoComplete({ const onBlur = useMutableCallback((event) => { hide(); - onBlurAction(event); + handleOnBlur(event); }); useEffect(reset, [filter]); From b5e00caaec76fd87cf3816d2011d3f4c5a7800ac Mon Sep 17 00:00:00 2001 From: yash-rajpal Date: Thu, 16 Nov 2023 23:00:19 +0530 Subject: [PATCH 3/5] Revert "change function name" This reverts commit 0c7fe06d99881bd40a32813a91d3f9513699641a. --- .../fuselage/src/components/AutoComplete/AutoComplete.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/fuselage/src/components/AutoComplete/AutoComplete.tsx b/packages/fuselage/src/components/AutoComplete/AutoComplete.tsx index b4c1959e91..7409fa82a2 100644 --- a/packages/fuselage/src/components/AutoComplete/AutoComplete.tsx +++ b/packages/fuselage/src/components/AutoComplete/AutoComplete.tsx @@ -69,7 +69,7 @@ export function AutoComplete({ error, disabled, multiple, - onBlur: handleOnBlur = () => {}, + onBlur: onBlurAction = () => {}, ...props }: AutoCompleteProps): ReactElement { const ref = useRef(); @@ -124,7 +124,7 @@ export function AutoComplete({ const onBlur = useMutableCallback((event) => { hide(); - handleOnBlur(event); + onBlurAction(event); }); useEffect(reset, [filter]); From 4bc2c864c755c41b1040d25416faf33a0a4a7fcf Mon Sep 17 00:00:00 2001 From: yash-rajpal Date: Thu, 16 Nov 2023 23:01:16 +0530 Subject: [PATCH 4/5] proper naming convention --- .../fuselage/src/components/AutoComplete/AutoComplete.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/fuselage/src/components/AutoComplete/AutoComplete.tsx b/packages/fuselage/src/components/AutoComplete/AutoComplete.tsx index 7409fa82a2..a40dd6471e 100644 --- a/packages/fuselage/src/components/AutoComplete/AutoComplete.tsx +++ b/packages/fuselage/src/components/AutoComplete/AutoComplete.tsx @@ -122,7 +122,7 @@ export function AutoComplete({ const [cursor, handleKeyDown, , reset, [optionsAreVisible, hide, show]] = useCursor(value, memoizedOptions, handleSelect); - const onBlur = useMutableCallback((event) => { + const handleOnBlur = useMutableCallback((event) => { hide(); onBlurAction(event); }); @@ -154,7 +154,7 @@ export function AutoComplete({ onChange={useMutableCallback((e) => setFilter(e.currentTarget.value) )} - onBlur={onBlur} + onBlur={handleOnBlur} onFocus={show} onKeyDown={handleKeyDown} placeholder={ From 1e82e42778ffcfd3dca0ec6ba93db820f6c4107d Mon Sep 17 00:00:00 2001 From: Tasso Evangelista Date: Thu, 16 Nov 2023 14:53:43 -0300 Subject: [PATCH 5/5] Add changeset --- .changeset/sharp-planets-type.md | 5 +++++ .husky/pre-commit | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) create mode 100644 .changeset/sharp-planets-type.md diff --git a/.changeset/sharp-planets-type.md b/.changeset/sharp-planets-type.md new file mode 100644 index 0000000000..85bb4b931f --- /dev/null +++ b/.changeset/sharp-planets-type.md @@ -0,0 +1,5 @@ +--- +"@rocket.chat/fuselage": patch +--- + +Handle `onBlur` prop on AutoComplete diff --git a/.husky/pre-commit b/.husky/pre-commit index 7486fddf77..3a48504855 100755 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -2,4 +2,4 @@ . "$(dirname "$0")/_/husky.sh" yarn update-readme -yarn lint-staged \ No newline at end of file +yarn lint-staged --allow-empty