fix(Select): should prevent scroll when click wrapper, close #4492 (#…

…4504) * fix(Select): should prevent scroll when click wrapper --------- Co-authored-by: chenkeyao.chenkeya <[email protected]>
alibaba-fusion · Oct 31, 2023 · dae8daf · dae8daf
1 parent bf5bf12
commit dae8daf
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/src/input/base.jsx b/src/input/base.jsx
@@ -320,8 +320,8 @@ class Base extends React.Component {
         return this.inputRef;
     }
 
-    focus(start, end) {
-        this.inputRef.focus();
+    focus(start, end, preventScroll = false) {
+        this.inputRef.focus({ preventScroll });
         if (typeof start === 'number') {
             this.inputRef.selectionStart = start;
         }

diff --git a/src/select/base.jsx b/src/select/base.jsx
@@ -590,7 +590,7 @@ export default class Base extends React.Component {
      * @override
      */
     focusInput() {
-        this.inputRef.focus();
+        this.inputRef.focus(undefined, undefined, true);
     }
 
     focus(...args) {

diff --git a/test/select/index-spec.js b/test/select/index-spec.js
@@ -1289,6 +1289,23 @@ describe('AutoComplete', () => {
         }, 200);
     });
 
+    it('should prevent scroll when click wrapper', async () => {
+        wrapper = mount(
+            <div className="select-scroll-wrapper" style={{ width: 300, overflowX: 'scroll' }}>
+                <Select
+                    style={{ width: 540 }} 
+                    dataSource={[
+                        { label: 'xxx', value: 'yyy' },
+                        { label: 'empty', value: '' },
+                ]}/>
+            </div>
+        );
+        const selectWrapper = wrapper.find('.select-scroll-wrapper').getDOMNode();
+        const prevScrollLeft = selectWrapper.scrollLeft;
+        ReactTestUtils.Simulate.click(selectWrapper);
+        assert(wrapper.find('.select-scroll-wrapper').getDOMNode().scrollLeft === prevScrollLeft);
+    })
+
     describe('react api', () => {
         it('calls componentWillReceiveProps', done => {
             wrapper.setProps({ value: '30' });