[UIK-4884][input] fixed autoFocus logic - set focus after timeout to prevent unnecessary scrolls

semcore/input-number/src/InputNumber.jsx

@@ -178,7 +178,13 @@ class Value extends Component {
   componentDidMount() {
     this.valueInputRef.current?.addEventListener('wheel', this.onWheel);
 
-    const { inputRef, value } = this.asProps;
+    const { inputRef, value, autoFocus } = this.asProps;
+
+    if (autoFocus) {
+      setTimeout(() => {
+        this.valueInputRef.current?.focus();
+      });
+    }
 
     if (inputRef.current) {
       inputRef.current.stepUp = this.stepUp;

semcore/input/src/Input.jsx

@@ -111,6 +111,16 @@ class Value extends Component {
     defaultValue: '',
   };
 
+  inputRef = React.createRef();
+
+  componentDidMount() {
+    if (this.asProps.autoFocus) {
+      setTimeout(() => {
+        this.inputRef.current?.focus();
+      });
+    }
+  }
+
   uncontrolledProps() {
     return {
       value: (e) => e.target.value,
@@ -126,12 +136,14 @@ class Value extends Component {
         {(neighborLocation) =>
           sstyled(styles)(
             <SValue
+              ref={this.inputRef}
               render={Box}
               inAfterOutline
               neighborLocation={neighborLocation}
               tag='input'
               type='text'
               aria-invalid={state === 'invalid'}
+              use:autoFocus={false}
             />,
           )}
       </NeighborLocation.Detect>

semcore/select/__tests__/filters-with-select/filter-kd-positions-volume.browser-test.tsx

@@ -63,21 +63,18 @@ test.describe(TAG.FUNCTIONAL, () => {
     await test.step('Verify 1st item highlighted when select opened', async () => {
       await page.keyboard.press('Tab');
       await page.keyboard.press('Enter');
+      await page.waitForTimeout(200);
       await locators.apply(page).waitFor({ state: 'visible' });
       await expect(locators.trigger(page)).toBeFocused();
       await expect(locators.options(page).first()).toHaveClass(/highlighted/);
     });
 
     await test.step('Verify keyboard navigation inside dialog', async () => {
-      await page.waitForTimeout(200);
+      for (let i = 0; i++; i < 6) {
+        await page.keyboard.press('ArrowDown');
+        await page.waitForTimeout(50);
+      }
 
-      await expect(locators.options(page).first()).toHaveClass(/highlighted/);
-      await page.keyboard.press('ArrowDown');
-      await page.keyboard.press('ArrowDown');
-      await page.keyboard.press('ArrowDown');
-      await page.keyboard.press('ArrowDown');
-      await page.keyboard.press('ArrowDown');
-      await page.keyboard.press('ArrowDown');
       await expect(locators.options(page).first()).toHaveClass(/highlighted/);
 
       await page.keyboard.press('Tab');
@@ -90,6 +87,8 @@ test.describe(TAG.FUNCTIONAL, () => {
       await expect(locators.apply(page)).toBeFocused();
 
       await page.keyboard.press('Tab');
+      await expect(locators.apply(page)).not.toBeFocused();
+
       await expect(locators.options(page).first()).toHaveClass(/highlighted/);
     });
 

semcore/textarea/src/Textarea.jsx

@@ -107,6 +107,11 @@ class Textarea extends Component {
   componentDidMount() {
     this.calculateRows(true);
     this.addGlobalHandlers();
+    if (this.asProps.autoFocus) {
+      setTimeout(() => {
+        this.node?.focus();
+      });
+    }
   }
 
   componentDidUpdate(prevProps) {
@@ -128,7 +133,7 @@ class Textarea extends Component {
     const STextarea = Root;
     const { styles } = this.asProps;
 
-    return sstyled(styles)(<STextarea render={Box} tag='textarea' ref={this.setRef} />);
+    return sstyled(styles)(<STextarea render={Box} tag='textarea' ref={this.setRef} use:autoFocus={false} />);
   }
 }
 

stories/components/dropdown-menu/tests/Dropdown-menu.stories.tsx

@@ -8,6 +8,7 @@ import NestedMenuPropsExample, { defaultNestedMenuPropsExample } from './example
 import OnVisibleExample from './examples/on-visible';
 import OnVisible2ndExample from './examples/on-visible-2nd';
 import SelectablePropsExample, { defaultDropDownSelectablePropsExample } from './examples/selectable-props';
+import WithContentOnPageExample from './examples/test-with-content-on-page';
 import WithFocusableTriggerExample from './examples/with-focusable-in-trigger';
 import WithSearchExample from './examples/with-search';
 import WithEllipsisExample, { defaultProps as defaultWithEllipsisProps } from './examples/with_ellipsis';
@@ -48,6 +49,10 @@ export const WithFocusableTrigger: Story = {
   render: WithFocusableTriggerExample,
 };
 
+export const WithContentOnPage: Story = {
+  render: WithContentOnPageExample,
+};
+
 export const ListItemsType: Story = {
   render: ListItemsTypeExample,
 };

stories/components/dropdown-menu/tests/examples/test-with-content-on-page.tsx

@@ -0,0 +1,61 @@
+import { FilterTrigger } from '@semcore/ui/base-trigger';
+import DropdownMenu from '@semcore/ui/dropdown-menu';
+import { InputSearch } from '@semcore/ui/select';
+import React from 'react';
+
+const Demo = () => {
+  const [visible, setVisible] = React.useState(false);
+
+  const handleVisiblity = (next: any) => {
+    if (next) {
+      alert('boom');
+    }
+
+    setVisible(next);
+  };
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenu.Trigger tag={FilterTrigger}>
+          Dropdown Trigger
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Popper aria-label='Dropdown'>
+          <InputSearch />
+          <DropdownMenu.List>
+            <DropdownMenu.Item>Menu item 1</DropdownMenu.Item>
+            <DropdownMenu.Item>Menu item 2</DropdownMenu.Item>
+          </DropdownMenu.List>
+        </DropdownMenu.Popper>
+      </DropdownMenu>
+      <h2>Start editing to see some magic happen!</h2>
+      <h2>Start editing to see some magic happen!</h2>
+      <h2>Start editing to see some magic happen!</h2>
+      <h2>Start editing to see some magic happen!</h2>
+      <h2>Start editing to see some magic happen!</h2>
+      <h2>Start editing to see some magic happen!</h2>
+      <h2>Start editing to see some magic happen!</h2>
+      <h2>Start editing to see some magic happen!</h2>
+      <h2>Start editing to see some magic happen!</h2>
+      <h2>Start editing to see some magic happen!</h2>
+      <h2>Start editing to see some magic happen!</h2>
+      <h2>Start editing to see some magic happen!</h2>
+      <h2>Start editing to see some magic happen!</h2>
+      <h2>Start editing to see some magic happen!</h2>
+      <h2>Start editing to see some magic happen!</h2>
+      <h2>Start editing to see some magic happen!</h2>
+      <h2>Start editing to see some magic happen!</h2>
+      <h2>Start editing to see some magic happen!</h2>
+      <h2>Start editing to see some magic happen!</h2>
+      <h2>Start editing to see some magic happen!</h2>
+      <h2>Start editing to see some magic happen!</h2>
+      <h2>Start editing to see some magic happen!</h2>
+      <h2>Start editing to see some magic happen!</h2>
+      <h2>Start editing to see some magic happen!</h2>
+      <h2>Start editing to see some magic happen!</h2>
+      <h2>Start editing to see some magic happen!</h2>
+    </>
+  );
+};
+
+export default Demo;