From b5fccbda6c03ada9aee36aa46cd135d0a696df2e Mon Sep 17 00:00:00 2001 From: JiaQi <112228030+Yuiai01@users.noreply.github.com> Date: Thu, 14 Sep 2023 14:47:07 +0800 Subject: [PATCH] fix: trigger onBlur does not require reset focused (#980) * fix: trigger onBlur does not require reset focused * chore: add test case * chore: update test case * Update tests/focus.test.tsx * Update tests/focus.test.tsx --------- Co-authored-by: dujiaqi Co-authored-by: MadCcc <1075746765@qq.com> --- src/BaseSelect.tsx | 7 ++++++- tests/focus.test.tsx | 42 +++++++++++++++++++++++++++++++++++++++++- 2 files changed, 47 insertions(+), 2 deletions(-) diff --git a/src/BaseSelect.tsx b/src/BaseSelect.tsx index 85ae8bc59..21375ab1c 100644 --- a/src/BaseSelect.tsx +++ b/src/BaseSelect.tsx @@ -316,6 +316,7 @@ const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref(null); const selectorRef = React.useRef(null); const listRef = React.useRef(null); + const blurRef = React.useRef(false); /** Used for component focused management */ const [mockFocused, setMockFocused, cancelSetMockFocused] = useDelayReset(); @@ -451,7 +452,8 @@ const BaseSelect = React.forwardRef((props: BaseSelectProps, ref: React.Ref = (...args) => { + blurRef.current = true; + setMockFocused(false, () => { focusRef.current = false; + blurRef.current = false; onToggleOpen(false); }); diff --git a/tests/focus.test.tsx b/tests/focus.test.tsx index 931bfce33..80b6aaf01 100644 --- a/tests/focus.test.tsx +++ b/tests/focus.test.tsx @@ -1,7 +1,8 @@ import { mount } from 'enzyme'; -import React from 'react'; +import React, { useState } from 'react'; import { act } from 'react-dom/test-utils'; import Select from '../src'; +import { fireEvent, render } from '@testing-library/react'; describe('Select.Focus', () => { it('disabled should reset focused', () => { @@ -31,6 +32,45 @@ describe('Select.Focus', () => { jest.useRealTimers(); }); + it('after onBlur is triggered the focused does not need to be reset', () => { + jest.useFakeTimers(); + + const onFocus = jest.fn(); + + const Demo: React.FC = () => { + const [disabled, setDisabled] = useState(false); + return ( + <> +