From 654c0f8471035bacac67b260e13cffa8db29770d Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Mon, 22 Jun 2020 18:57:31 +0800 Subject: [PATCH 01/18] fix: mousedown can't open picker out of input elements --- examples/range.tsx | 2 ++ src/RangePicker.tsx | 14 ++++++++++++++ 2 files changed, 16 insertions(+) diff --git a/examples/range.tsx b/examples/range.tsx index 906959dbb..0544f8151 100644 --- a/examples/range.tsx +++ b/examples/range.tsx @@ -54,6 +54,8 @@ export default () => { allowClear ref={rangePickerRef} defaultValue={[moment('1990-09-03'), moment('1989-11-28')]} + clearIcon={X} + suffixIcon={O} /> {...sharedProps} diff --git a/src/RangePicker.tsx b/src/RangePicker.tsx index 5ca56f2a7..67abd8317 100644 --- a/src/RangePicker.tsx +++ b/src/RangePicker.tsx @@ -485,6 +485,19 @@ function InnerRangePicker(props: RangePickerProps) { } }; + // ======================== Mousedown Picker ======================== + const onPickerMousedown = (e: MouseEvent) => { + if ( + !mergedOpen && + !startInputRef.current.contains(e.target as Node | null) && + !endInputRef.current.contains(e.target as Node | null) + ) { + e.preventDefault(); + startInputRef.current.focus(); + triggerOpen(true, 0); + } + }; + // ============================= Text ============================== const sharedTextHooksProps = { formatList, @@ -960,6 +973,7 @@ function InnerRangePicker(props: RangePickerProps) { [`${prefixCls}-rtl`]: direction === 'rtl', })} style={style} + onMouseDown={onPickerMousedown} {...getDataOrAriaProps(props)} >
Date: Tue, 23 Jun 2020 15:52:02 +0800 Subject: [PATCH 02/18] fix: click can't open picker out of input elements --- src/RangePicker.tsx | 50 ++++++++++++++++++++++++++++++++------------- 1 file changed, 36 insertions(+), 14 deletions(-) diff --git a/src/RangePicker.tsx b/src/RangePicker.tsx index 67abd8317..dfa76fd86 100644 --- a/src/RangePicker.tsx +++ b/src/RangePicker.tsx @@ -485,19 +485,6 @@ function InnerRangePicker(props: RangePickerProps) { } }; - // ======================== Mousedown Picker ======================== - const onPickerMousedown = (e: MouseEvent) => { - if ( - !mergedOpen && - !startInputRef.current.contains(e.target as Node | null) && - !endInputRef.current.contains(e.target as Node | null) - ) { - e.preventDefault(); - startInputRef.current.focus(); - triggerOpen(true, 0); - } - }; - // ============================= Text ============================== const sharedTextHooksProps = { formatList, @@ -578,6 +565,40 @@ function InnerRangePicker(props: RangePickerProps) { value: endText, }); + // ========================== Click Picker ========================== + const onPickerClick = (e: MouseEvent) => { + if ( + !mergedOpen && + !startInputRef.current.contains(e.target as Node | null) && + !endInputRef.current.contains(e.target as Node | null) + ) { + if (!mergedDisabled[0]) { + startInputProps.onMouseDown(null); + Promise.resolve().then(() => { + // make sure panel DOM exists + startInputRef.current.focus(); + }); + } else if (!mergedDisabled[1]) { + endInputProps.onMouseDown(null); + Promise.resolve().then(() => { + endInputRef.current.focus(); + }); + } + } + }; + + const onPickerMouseDown = (e: MouseEvent) => { + // shouldn't affect input elements if picker is active + if ( + mergedOpen && + (startFocused || endFocused) && + !startInputRef.current.contains(e.target as Node | null) && + !endInputRef.current.contains(e.target as Node | null) + ) { + e.preventDefault(); + } + }; + // ============================= Sync ============================== // Close should sync back with text value const startStr = @@ -973,7 +994,8 @@ function InnerRangePicker(props: RangePickerProps) { [`${prefixCls}-rtl`]: direction === 'rtl', })} style={style} - onMouseDown={onPickerMousedown} + onClick={onPickerClick} + onMouseDown={onPickerMouseDown} {...getDataOrAriaProps(props)} >
Date: Tue, 23 Jun 2020 16:33:49 +0800 Subject: [PATCH 03/18] test: click trigger range picker --- tests/range.spec.tsx | 44 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx index 334b66497..dcb907843 100644 --- a/tests/range.spec.tsx +++ b/tests/range.spec.tsx @@ -1299,4 +1299,48 @@ describe('Picker.Range', () => { expect(wrapper.isOpen()).toBeFalsy(); }); }); + + describe('click at non-input elements', () => { + it('should open when click suffix', () => { + const wrapper = mount(); + wrapper.find('.rc-picker-suffix').simulate('click'); + expect(wrapper.isOpen()).toBeTruthy(); + }); + it('should open when click seperator', () => { + const wrapper = mount(); + wrapper.find('.rc-picker-range-separator').simulate('click'); + expect(wrapper.isOpen()).toBeTruthy(); + }); + it('should focus on the first element', () => { + const wrapper = mount(); + wrapper.find('.rc-picker-suffix').simulate('click'); + expect(document.activeElement).toStrictEqual( + wrapper + .find('input') + .first() + .getDOMNode(), + ); + }); + it('should focus on the second element if first is disabled', () => { + const wrapper = mount(); + wrapper.find('.rc-picker-suffix').simulate('click'); + expect(document.activeElement).toStrictEqual( + wrapper + .find('input') + .last() + .getDOMNode(), + ); + }); + it("shouldn't let mousedown blur the input", () => { + const wrapper = mount(); + wrapper.find('.rc-picker-suffix').simulate('click'); + wrapper.find('.rc-picker-suffix').simulate('mousedown'); + expect(document.activeElement).toStrictEqual( + wrapper + .find('input') + .first() + .getDOMNode(), + ); + }); + }); }); From 955d50cd37e8a8c9891e38def5b7262cb8951cbd Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Sun, 28 Jun 2020 15:57:31 +0800 Subject: [PATCH 04/18] chore --- src/RangePicker.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/RangePicker.tsx b/src/RangePicker.tsx index dfa76fd86..eae49a4df 100644 --- a/src/RangePicker.tsx +++ b/src/RangePicker.tsx @@ -569,13 +569,13 @@ function InnerRangePicker(props: RangePickerProps) { const onPickerClick = (e: MouseEvent) => { if ( !mergedOpen && - !startInputRef.current.contains(e.target as Node | null) && - !endInputRef.current.contains(e.target as Node | null) + !startInputRef.current.contains(e.target as Node) && + !endInputRef.current.contains(e.target as Node) ) { if (!mergedDisabled[0]) { startInputProps.onMouseDown(null); + // User Promise.resolve make sure panel DOM exists Promise.resolve().then(() => { - // make sure panel DOM exists startInputRef.current.focus(); }); } else if (!mergedDisabled[1]) { @@ -592,8 +592,8 @@ function InnerRangePicker(props: RangePickerProps) { if ( mergedOpen && (startFocused || endFocused) && - !startInputRef.current.contains(e.target as Node | null) && - !endInputRef.current.contains(e.target as Node | null) + !startInputRef.current.contains(e.target as Node) && + !endInputRef.current.contains(e.target as Node) ) { e.preventDefault(); } From 750652573c7c415c942daca4ef5bd72d708c4a52 Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Sun, 28 Jun 2020 18:52:47 +0800 Subject: [PATCH 05/18] test: refine test cases --- tests/range.spec.tsx | 87 +++++++++++++++++++++++++++++--------------- 1 file changed, 58 insertions(+), 29 deletions(-) diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx index dcb907843..e515c3bd0 100644 --- a/tests/range.spec.tsx +++ b/tests/range.spec.tsx @@ -32,6 +32,10 @@ describe('Picker.Range', () => { MockDate.reset(); }); + beforeEach(() => { + if (document.activeElement) (document.activeElement as any).blur(); + }); + describe('value', () => { it('defaultValue', () => { const wrapper = mount( @@ -1311,36 +1315,61 @@ describe('Picker.Range', () => { wrapper.find('.rc-picker-range-separator').simulate('click'); expect(wrapper.isOpen()).toBeTruthy(); }); - it('should focus on the first element', () => { - const wrapper = mount(); - wrapper.find('.rc-picker-suffix').simulate('click'); - expect(document.activeElement).toStrictEqual( - wrapper - .find('input') - .first() - .getDOMNode(), - ); - }); - it('should focus on the second element if first is disabled', () => { - const wrapper = mount(); - wrapper.find('.rc-picker-suffix').simulate('click'); - expect(document.activeElement).toStrictEqual( - wrapper - .find('input') - .last() - .getDOMNode(), - ); + it('should focus on the first element', done => { + setTimeout(() => { + const wrapper = mount(); + wrapper.find('.rc-picker-suffix').simulate('click'); + setTimeout(() => { + expect(document.activeElement).toStrictEqual( + wrapper + .find('input') + .first() + .getDOMNode(), + ); + done(); + }, 0); + }, 100); }); - it("shouldn't let mousedown blur the input", () => { - const wrapper = mount(); - wrapper.find('.rc-picker-suffix').simulate('click'); - wrapper.find('.rc-picker-suffix').simulate('mousedown'); - expect(document.activeElement).toStrictEqual( - wrapper - .find('input') - .first() - .getDOMNode(), - ); + it('should focus on the second element if first is disabled', done => { + setTimeout(() => { + const wrapper = mount(); + wrapper.find('.rc-picker-suffix').simulate('click'); + setTimeout(() => { + expect(document.activeElement).toStrictEqual( + wrapper + .find('input') + .last() + .getDOMNode(), + ); + done(); + }, 0); + }, 200); }); + // WTF test case + // it("shouldn't let mousedown blur the input", (done) => { + // setTimeout(() => { + // console.log('test start') + // const preventDefault = jest.fn(); + // const wrapper = mount(); + // wrapper.find('.rc-picker-suffix').simulate('click'); + // console.log('after click') + // setTimeout(() => { + // console.log('test settimeout start', document.activeElement.tagName) + // wrapper.find('.rc-picker-suffix').simulate('mousedown', { + // preventDefault, + // jjj: '666' + // }); + // expect(preventDefault).toHaveBeenCalled(); + // // expect(document.activeElement).toStrictEqual( + // // wrapper + // // .find('input') + // // .first() + // // .getDOMNode(), + // // ); + // done(); + // }, 0); + // console.log('test sync end') + // }, 400); + // }); }); }); From 331abfe34c9574a6a4035efca91b27bd1a55e494 Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Sun, 28 Jun 2020 18:57:15 +0800 Subject: [PATCH 06/18] test: add description for wired case --- tests/range.spec.tsx | 15 ++++----------- 1 file changed, 4 insertions(+), 11 deletions(-) diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx index e515c3bd0..7cc67ebf8 100644 --- a/tests/range.spec.tsx +++ b/tests/range.spec.tsx @@ -1348,27 +1348,20 @@ describe('Picker.Range', () => { // WTF test case // it("shouldn't let mousedown blur the input", (done) => { // setTimeout(() => { - // console.log('test start') + // console.log('sync test start') // const preventDefault = jest.fn(); // const wrapper = mount(); // wrapper.find('.rc-picker-suffix').simulate('click'); - // console.log('after click') + // // 这里出问题的核心原因是 simulate click 导致的 startInputRef.focus() 没有触发 startInputProps.onFocus // setTimeout(() => { - // console.log('test settimeout start', document.activeElement.tagName) + // // 没有触发 onFocus 就导致 range-picker 的内部状态不对，走不到 preventDefault 的分支 // wrapper.find('.rc-picker-suffix').simulate('mousedown', { // preventDefault, - // jjj: '666' // }); // expect(preventDefault).toHaveBeenCalled(); - // // expect(document.activeElement).toStrictEqual( - // // wrapper - // // .find('input') - // // .first() - // // .getDOMNode(), - // // ); // done(); // }, 0); - // console.log('test sync end') + // console.log('sync test end') // }, 400); // }); }); From 6eaa2847539d4ccb3944508ae2d62abdbdb24942 Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Sun, 28 Jun 2020 20:01:04 +0800 Subject: [PATCH 07/18] test: fix focus by attachTo body --- tests/range.spec.tsx | 38 ++++++++++++++++++++------------------ 1 file changed, 20 insertions(+), 18 deletions(-) diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx index 7cc67ebf8..229f28de2 100644 --- a/tests/range.spec.tsx +++ b/tests/range.spec.tsx @@ -1346,23 +1346,25 @@ describe('Picker.Range', () => { }, 200); }); // WTF test case - // it("shouldn't let mousedown blur the input", (done) => { - // setTimeout(() => { - // console.log('sync test start') - // const preventDefault = jest.fn(); - // const wrapper = mount(); - // wrapper.find('.rc-picker-suffix').simulate('click'); - // // 这里出问题的核心原因是 simulate click 导致的 startInputRef.focus() 没有触发 startInputProps.onFocus - // setTimeout(() => { - // // 没有触发 onFocus 就导致 range-picker 的内部状态不对，走不到 preventDefault 的分支 - // wrapper.find('.rc-picker-suffix').simulate('mousedown', { - // preventDefault, - // }); - // expect(preventDefault).toHaveBeenCalled(); - // done(); - // }, 0); - // console.log('sync test end') - // }, 400); - // }); + it("shouldn't let mousedown blur the input", done => { + setTimeout(() => { + console.log('sync test start'); + const preventDefault = jest.fn(); + const wrapper = mount(, { + attachTo: document.body, + }); + wrapper.find('.rc-picker-suffix').simulate('click'); + // 这里出问题的核心原因是 simulate click 导致的 startInputRef.focus() 没有触发 startInputProps.onFocus + setTimeout(() => { + // 没有触发 onFocus 就导致 range-picker 的内部状态不对，走不到 preventDefault 的分支 + wrapper.find('.rc-picker-suffix').simulate('mousedown', { + preventDefault, + }); + expect(preventDefault).toHaveBeenCalled(); + done(); + }, 0); + console.log('sync test end'); + }, 400); + }); }); }); From ffa5b2eaeb7da4f18cc3f4e781e833d9dc739e9e Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Sun, 28 Jun 2020 20:02:06 +0800 Subject: [PATCH 08/18] chore --- tests/range.spec.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx index 229f28de2..d0b8d966e 100644 --- a/tests/range.spec.tsx +++ b/tests/range.spec.tsx @@ -1345,10 +1345,8 @@ describe('Picker.Range', () => { }, 0); }, 200); }); - // WTF test case it("shouldn't let mousedown blur the input", done => { setTimeout(() => { - console.log('sync test start'); const preventDefault = jest.fn(); const wrapper = mount(, { attachTo: document.body, @@ -1363,7 +1361,6 @@ describe('Picker.Range', () => { expect(preventDefault).toHaveBeenCalled(); done(); }, 0); - console.log('sync test end'); }, 400); }); }); From 1049a32e13cad9cef8dfbaaba527b6e2b9c25fa0 Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Mon, 29 Jun 2020 10:13:54 +0800 Subject: [PATCH 09/18] chore --- tests/range.spec.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx index d0b8d966e..701ff8e59 100644 --- a/tests/range.spec.tsx +++ b/tests/range.spec.tsx @@ -1352,16 +1352,14 @@ describe('Picker.Range', () => { attachTo: document.body, }); wrapper.find('.rc-picker-suffix').simulate('click'); - // 这里出问题的核心原因是 simulate click 导致的 startInputRef.focus() 没有触发 startInputProps.onFocus setTimeout(() => { - // 没有触发 onFocus 就导致 range-picker 的内部状态不对，走不到 preventDefault 的分支 wrapper.find('.rc-picker-suffix').simulate('mousedown', { preventDefault, }); expect(preventDefault).toHaveBeenCalled(); done(); }, 0); - }, 400); + }, 300); }); }); }); From 65b52b2661171ea21d9662a95559ce7f055d100d Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Mon, 29 Jun 2020 10:24:18 +0800 Subject: [PATCH 10/18] fix: typo --- src/RangePicker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/RangePicker.tsx b/src/RangePicker.tsx index eae49a4df..80683f2df 100644 --- a/src/RangePicker.tsx +++ b/src/RangePicker.tsx @@ -574,7 +574,7 @@ function InnerRangePicker(props: RangePickerProps) { ) { if (!mergedDisabled[0]) { startInputProps.onMouseDown(null); - // User Promise.resolve make sure panel DOM exists + // Use Promise.resolve to make sure panel DOM exists Promise.resolve().then(() => { startInputRef.current.focus(); }); From 8381946339ec1a8a45890e8cb97504004d977d9c Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Mon, 29 Jun 2020 10:46:42 +0800 Subject: [PATCH 11/18] refactor: use setTimeout rather than Promise --- src/RangePicker.tsx | 10 +++--- tests/range.spec.tsx | 80 ++++++++++++++++++++------------------------ 2 files changed, 42 insertions(+), 48 deletions(-) diff --git a/src/RangePicker.tsx b/src/RangePicker.tsx index 80683f2df..f52fa64a1 100644 --- a/src/RangePicker.tsx +++ b/src/RangePicker.tsx @@ -574,15 +574,15 @@ function InnerRangePicker(props: RangePickerProps) { ) { if (!mergedDisabled[0]) { startInputProps.onMouseDown(null); - // Use Promise.resolve to make sure panel DOM exists - Promise.resolve().then(() => { + // Use setTimeout to make sure panel DOM exists + setTimeout(() => { startInputRef.current.focus(); - }); + }, 0); } else if (!mergedDisabled[1]) { endInputProps.onMouseDown(null); - Promise.resolve().then(() => { + setTimeout(() => { endInputRef.current.focus(); - }); + }, 0); } } }; diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx index 701ff8e59..ddddd364b 100644 --- a/tests/range.spec.tsx +++ b/tests/range.spec.tsx @@ -1315,51 +1315,45 @@ describe('Picker.Range', () => { wrapper.find('.rc-picker-range-separator').simulate('click'); expect(wrapper.isOpen()).toBeTruthy(); }); - it('should focus on the first element', done => { - setTimeout(() => { - const wrapper = mount(); - wrapper.find('.rc-picker-suffix').simulate('click'); - setTimeout(() => { - expect(document.activeElement).toStrictEqual( - wrapper - .find('input') - .first() - .getDOMNode(), - ); - done(); - }, 0); - }, 100); + it('should focus on the first element', () => { + jest.useFakeTimers(); + const wrapper = mount(); + wrapper.find('.rc-picker-suffix').simulate('click'); + jest.runAllTimers(); + expect(document.activeElement).toStrictEqual( + wrapper + .find('input') + .first() + .getDOMNode(), + ); + jest.useRealTimers(); }); - it('should focus on the second element if first is disabled', done => { - setTimeout(() => { - const wrapper = mount(); - wrapper.find('.rc-picker-suffix').simulate('click'); - setTimeout(() => { - expect(document.activeElement).toStrictEqual( - wrapper - .find('input') - .last() - .getDOMNode(), - ); - done(); - }, 0); - }, 200); + it('should focus on the second element if first is disabled', () => { + jest.useFakeTimers(); + const wrapper = mount(); + wrapper.find('.rc-picker-suffix').simulate('click'); + jest.runAllTimers(); + expect(document.activeElement).toStrictEqual( + wrapper + .find('input') + .last() + .getDOMNode(), + ); + jest.useRealTimers(); }); - it("shouldn't let mousedown blur the input", done => { - setTimeout(() => { - const preventDefault = jest.fn(); - const wrapper = mount(, { - attachTo: document.body, - }); - wrapper.find('.rc-picker-suffix').simulate('click'); - setTimeout(() => { - wrapper.find('.rc-picker-suffix').simulate('mousedown', { - preventDefault, - }); - expect(preventDefault).toHaveBeenCalled(); - done(); - }, 0); - }, 300); + it("shouldn't let mousedown blur the input", () => { + jest.useFakeTimers(); + const preventDefault = jest.fn(); + const wrapper = mount(, { + attachTo: document.body, + }); + wrapper.find('.rc-picker-suffix').simulate('click'); + jest.runAllTimers(); + wrapper.find('.rc-picker-suffix').simulate('mousedown', { + preventDefault, + }); + expect(preventDefault).toHaveBeenCalled(); + jest.useRealTimers(); }); }); }); From ea2846e3ddfce8ef05057c6f7a3548218a7525b1 Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Mon, 29 Jun 2020 11:59:44 +0800 Subject: [PATCH 12/18] chore --- src/RangePicker.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/RangePicker.tsx b/src/RangePicker.tsx index f52fa64a1..763eca9c9 100644 --- a/src/RangePicker.tsx +++ b/src/RangePicker.tsx @@ -573,13 +573,13 @@ function InnerRangePicker(props: RangePickerProps) { !endInputRef.current.contains(e.target as Node) ) { if (!mergedDisabled[0]) { - startInputProps.onMouseDown(null); + triggerOpen(true, 0); // Use setTimeout to make sure panel DOM exists setTimeout(() => { startInputRef.current.focus(); }, 0); } else if (!mergedDisabled[1]) { - endInputProps.onMouseDown(null); + triggerOpen(true, 1); setTimeout(() => { endInputRef.current.focus(); }, 0); From 78bbc2665af92da62479b87c645f4d4c4171910f Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Mon, 29 Jun 2020 14:43:50 +0800 Subject: [PATCH 13/18] refactor --- src/RangePicker.tsx | 25 ++++++++++++++++--------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/src/RangePicker.tsx b/src/RangePicker.tsx index 763eca9c9..1b438a1c7 100644 --- a/src/RangePicker.tsx +++ b/src/RangePicker.tsx @@ -566,23 +566,30 @@ function InnerRangePicker(props: RangePickerProps) { }); // ========================== Click Picker ========================== + function triggerOpenAndFocus(index: 0 | 1) { + triggerOpen(true, index); + // Use setTimeout to make sure panel DOM exists + setTimeout(() => { + if (index === 0) { + startInputRef.current.focus(); + } else { + endInputRef.current.focus(); + } + }, 0); + } + const onPickerClick = (e: MouseEvent) => { + // When click inside the picker & outside the picker's input elements + // the panel should still be opened if ( !mergedOpen && !startInputRef.current.contains(e.target as Node) && !endInputRef.current.contains(e.target as Node) ) { if (!mergedDisabled[0]) { - triggerOpen(true, 0); - // Use setTimeout to make sure panel DOM exists - setTimeout(() => { - startInputRef.current.focus(); - }, 0); + triggerOpenAndFocus(0); } else if (!mergedDisabled[1]) { - triggerOpen(true, 1); - setTimeout(() => { - endInputRef.current.focus(); - }, 0); + triggerOpenAndFocus(1); } } }; From 0dba63a8f954b95a554b427cf5a5467873ebe10f Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Mon, 29 Jun 2020 14:58:19 +0800 Subject: [PATCH 14/18] refactor --- src/RangePicker.tsx | 31 +++++++++++++------------------ 1 file changed, 13 insertions(+), 18 deletions(-) diff --git a/src/RangePicker.tsx b/src/RangePicker.tsx index 1b438a1c7..7bd36b001 100644 --- a/src/RangePicker.tsx +++ b/src/RangePicker.tsx @@ -374,6 +374,18 @@ function InnerRangePicker(props: RangePickerProps) { } } + function triggerOpenAndFocus(index: 0 | 1) { + triggerOpen(true, index); + // Use setTimeout to make sure panel DOM exists + setTimeout(() => { + if (index === 0) { + startInputRef.current.focus(); + } else { + endInputRef.current.focus(); + } + }, 0); + } + function triggerChange(newValue: RangeValue, sourceIndex: 0 | 1) { let values = newValue; const startValue = getValue(values, 0); @@ -457,12 +469,7 @@ function InnerRangePicker(props: RangePickerProps) { triggerOpen(true, nextOpenIndex); // Delay to focus to avoid input blur trigger expired selectedValues - setTimeout(() => { - const inputRef = [startInputRef, endInputRef][nextOpenIndex]; - if (inputRef.current) { - inputRef.current.focus(); - } - }, 0); + triggerOpenAndFocus(nextOpenIndex); } else { triggerOpen(false, sourceIndex); } @@ -566,18 +573,6 @@ function InnerRangePicker(props: RangePickerProps) { }); // ========================== Click Picker ========================== - function triggerOpenAndFocus(index: 0 | 1) { - triggerOpen(true, index); - // Use setTimeout to make sure panel DOM exists - setTimeout(() => { - if (index === 0) { - startInputRef.current.focus(); - } else { - endInputRef.current.focus(); - } - }, 0); - } - const onPickerClick = (e: MouseEvent) => { // When click inside the picker & outside the picker's input elements // the panel should still be opened From 3ee229260600f990ccaf99979111353ffecf16bc Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Mon, 29 Jun 2020 15:07:06 +0800 Subject: [PATCH 15/18] refactor --- src/RangePicker.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/RangePicker.tsx b/src/RangePicker.tsx index 7bd36b001..a46e65b7f 100644 --- a/src/RangePicker.tsx +++ b/src/RangePicker.tsx @@ -378,10 +378,9 @@ function InnerRangePicker(props: RangePickerProps) { triggerOpen(true, index); // Use setTimeout to make sure panel DOM exists setTimeout(() => { - if (index === 0) { - startInputRef.current.focus(); - } else { - endInputRef.current.focus(); + const inputRef = [startInputRef, endInputRef][index]; + if (inputRef.current) { + inputRef.current.focus(); } }, 0); } From e34caa5dcab4e24cd9e9d9c36cfb3f86a41c9f20 Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Mon, 29 Jun 2020 15:12:03 +0800 Subject: [PATCH 16/18] chore --- src/RangePicker.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/RangePicker.tsx b/src/RangePicker.tsx index a46e65b7f..976203337 100644 --- a/src/RangePicker.tsx +++ b/src/RangePicker.tsx @@ -465,8 +465,6 @@ function InnerRangePicker(props: RangePickerProps) { !openRecordsRef.current[nextOpenIndex] && getValue(values, sourceIndex) ) { - triggerOpen(true, nextOpenIndex); - // Delay to focus to avoid input blur trigger expired selectedValues triggerOpenAndFocus(nextOpenIndex); } else { From 3b6df22ff59eb363cc31386d137281773c3c5b5a Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Mon, 29 Jun 2020 15:17:56 +0800 Subject: [PATCH 17/18] test: remove useless beforeEach hooks --- tests/range.spec.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx index ddddd364b..bc2aac15f 100644 --- a/tests/range.spec.tsx +++ b/tests/range.spec.tsx @@ -32,10 +32,6 @@ describe('Picker.Range', () => { MockDate.reset(); }); - beforeEach(() => { - if (document.activeElement) (document.activeElement as any).blur(); - }); - describe('value', () => { it('defaultValue', () => { const wrapper = mount( From 52edecdbbbcd644dbfb9bef440632786d5387586 Mon Sep 17 00:00:00 2001 From: 07akioni <07akioni2@gmail.com> Date: Mon, 29 Jun 2020 15:35:07 +0800 Subject: [PATCH 18/18] test: merge some cases --- tests/range.spec.tsx | 29 +++++++++++------------------ 1 file changed, 11 insertions(+), 18 deletions(-) diff --git a/tests/range.spec.tsx b/tests/range.spec.tsx index bc2aac15f..f5140f55a 100644 --- a/tests/range.spec.tsx +++ b/tests/range.spec.tsx @@ -1301,20 +1301,11 @@ describe('Picker.Range', () => { }); describe('click at non-input elements', () => { - it('should open when click suffix', () => { - const wrapper = mount(); - wrapper.find('.rc-picker-suffix').simulate('click'); - expect(wrapper.isOpen()).toBeTruthy(); - }); - it('should open when click seperator', () => { - const wrapper = mount(); - wrapper.find('.rc-picker-range-separator').simulate('click'); - expect(wrapper.isOpen()).toBeTruthy(); - }); - it('should focus on the first element', () => { + it('should focus on the first element by default', () => { jest.useFakeTimers(); - const wrapper = mount(); - wrapper.find('.rc-picker-suffix').simulate('click'); + const wrapper = mount(); + wrapper.find('.rc-picker').simulate('click'); + expect(wrapper.isOpen()).toBeTruthy(); jest.runAllTimers(); expect(document.activeElement).toStrictEqual( wrapper @@ -1326,8 +1317,9 @@ describe('Picker.Range', () => { }); it('should focus on the second element if first is disabled', () => { jest.useFakeTimers(); - const wrapper = mount(); - wrapper.find('.rc-picker-suffix').simulate('click'); + const wrapper = mount(); + wrapper.find('.rc-picker').simulate('click'); + expect(wrapper.isOpen()).toBeTruthy(); jest.runAllTimers(); expect(document.activeElement).toStrictEqual( wrapper @@ -1340,14 +1332,15 @@ describe('Picker.Range', () => { it("shouldn't let mousedown blur the input", () => { jest.useFakeTimers(); const preventDefault = jest.fn(); - const wrapper = mount(, { + const wrapper = mount(, { attachTo: document.body, }); - wrapper.find('.rc-picker-suffix').simulate('click'); + wrapper.find('.rc-picker').simulate('click'); jest.runAllTimers(); - wrapper.find('.rc-picker-suffix').simulate('mousedown', { + wrapper.find('.rc-picker').simulate('mousedown', { preventDefault, }); + expect(wrapper.isOpen()).toBeTruthy(); expect(preventDefault).toHaveBeenCalled(); jest.useRealTimers(); });