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;