diff --git a/semcore/input-number/src/InputNumber.jsx b/semcore/input-number/src/InputNumber.jsx index f97aae3ea9..ae6408aa7f 100644 --- a/semcore/input-number/src/InputNumber.jsx +++ b/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; diff --git a/semcore/input/src/Input.jsx b/semcore/input/src/Input.jsx index dba777b528..0f75731fb0 100644 --- a/semcore/input/src/Input.jsx +++ b/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)( , )} diff --git a/semcore/select/__tests__/filters-with-select/filter-kd-positions-volume.browser-test.tsx b/semcore/select/__tests__/filters-with-select/filter-kd-positions-volume.browser-test.tsx index b48813cfd9..41e2f4fe20 100644 --- a/semcore/select/__tests__/filters-with-select/filter-kd-positions-volume.browser-test.tsx +++ b/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/); }); diff --git a/semcore/textarea/src/Textarea.jsx b/semcore/textarea/src/Textarea.jsx index f04b608284..de68848e16 100644 --- a/semcore/textarea/src/Textarea.jsx +++ b/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)(); + return sstyled(styles)(); } } diff --git a/stories/components/dropdown-menu/tests/Dropdown-menu.stories.tsx b/stories/components/dropdown-menu/tests/Dropdown-menu.stories.tsx index 8f18f79e90..2a235617f0 100644 --- a/stories/components/dropdown-menu/tests/Dropdown-menu.stories.tsx +++ b/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, }; diff --git a/stories/components/dropdown-menu/tests/examples/test-with-content-on-page.tsx b/stories/components/dropdown-menu/tests/examples/test-with-content-on-page.tsx new file mode 100644 index 0000000000..63a5abc306 --- /dev/null +++ b/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 ( + <> + + + Dropdown Trigger + + + + + Menu item 1 + Menu item 2 + + + +

Start editing to see some magic happen!

+

Start editing to see some magic happen!

+

Start editing to see some magic happen!

+

Start editing to see some magic happen!

+

Start editing to see some magic happen!

+

Start editing to see some magic happen!

+

Start editing to see some magic happen!

+

Start editing to see some magic happen!

+

Start editing to see some magic happen!

+

Start editing to see some magic happen!

+

Start editing to see some magic happen!

+

Start editing to see some magic happen!

+

Start editing to see some magic happen!

+

Start editing to see some magic happen!

+

Start editing to see some magic happen!

+

Start editing to see some magic happen!

+

Start editing to see some magic happen!

+

Start editing to see some magic happen!

+

Start editing to see some magic happen!

+

Start editing to see some magic happen!

+

Start editing to see some magic happen!

+

Start editing to see some magic happen!

+

Start editing to see some magic happen!

+

Start editing to see some magic happen!

+

Start editing to see some magic happen!

+

Start editing to see some magic happen!

+ + ); +}; + +export default Demo;