diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/NumberFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/NumberFieldInput.stories.tsx
index 702254863..b042f0fc0 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/NumberFieldInput.stories.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/NumberFieldInput.stories.tsx
@@ -1,6 +1,6 @@
import { Decorator, Meta, StoryObj } from '@storybook/react';
import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
import { FieldMetadataType } from '~/generated/graphql';
@@ -41,9 +41,14 @@ const NumberFieldInputWithContext = ({
}: NumberFieldInputWithContextProps) => {
const setHotKeyScope = useSetHotkeyScope();
+ const [isReady, setIsReady] = useState(false);
+
useEffect(() => {
- setHotKeyScope(DEFAULT_CELL_SCOPE.scope);
- }, [setHotKeyScope]);
+ if (!isReady) {
+ setHotKeyScope(DEFAULT_CELL_SCOPE.scope);
+ setIsReady(true);
+ }
+ }, [isReady, setHotKeyScope]);
return (
-
+ {isReady && }
+ {isReady && }
);
@@ -142,7 +148,7 @@ export const Enter: Story = {
expect(enterJestFn).toHaveBeenCalledTimes(0);
- await canvas.findByPlaceholderText('Enter number');
+ await canvas.findByTestId('is-ready-marker');
await userEvent.keyboard('{enter}');
await waitFor(() => {
@@ -157,7 +163,7 @@ export const Escape: Story = {
expect(escapeJestfn).toHaveBeenCalledTimes(0);
- await canvas.findByPlaceholderText('Enter number');
+ await canvas.findByTestId('is-ready-marker');
await userEvent.keyboard('{esc}');
await waitFor(() => {
@@ -174,7 +180,7 @@ export const ClickOutside: Story = {
const emptyDiv = canvas.getByTestId('data-field-input-click-outside-div');
- await canvas.findByPlaceholderText('Enter number');
+ await canvas.findByTestId('is-ready-marker');
await userEvent.click(emptyDiv);
await waitFor(() => {
@@ -189,7 +195,7 @@ export const Tab: Story = {
expect(tabJestFn).toHaveBeenCalledTimes(0);
- await canvas.findByPlaceholderText('Enter number');
+ await canvas.findByTestId('is-ready-marker');
await userEvent.keyboard('{tab}');
await waitFor(() => {
@@ -204,7 +210,7 @@ export const ShiftTab: Story = {
expect(shiftTabJestFn).toHaveBeenCalledTimes(0);
- await canvas.findByPlaceholderText('Enter number');
+ await canvas.findByTestId('is-ready-marker');
await userEvent.keyboard('{shift>}{tab}');
await waitFor(() => {
diff --git a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/TextFieldInput.stories.tsx b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/TextFieldInput.stories.tsx
index a36b36556..ff2f1a734 100644
--- a/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/TextFieldInput.stories.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-field/meta-types/input/components/__stories__/TextFieldInput.stories.tsx
@@ -1,5 +1,5 @@
import { expect, fn, userEvent, waitFor, within } from '@storybook/test';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
@@ -8,12 +8,11 @@ import { RecordFieldComponentInstanceContext } from '@/object-record/record-fiel
import { DEFAULT_CELL_SCOPE } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellV2';
import { Decorator, Meta, StoryObj } from '@storybook/react';
import { FieldMetadataType } from '~/generated/graphql';
-import { StorybookFieldInputDropdownFocusIdSetterEffect } from '~/testing/components/StorybookFieldInputDropdownFocusIdSetterEffect';
import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
import { useTextField } from '../../../hooks/useTextField';
import { TextFieldInput, TextFieldInputProps } from '../TextFieldInput';
-import { sleep } from '~/utils/sleep';
+
const TextFieldValueSetterEffect = ({ value }: { value: string }) => {
const { setFieldValue } = useTextField();
@@ -40,9 +39,14 @@ const TextFieldInputWithContext = ({
}: TextFieldInputWithContextProps) => {
const setHotKeyScope = useSetHotkeyScope();
+ const [isReady, setIsReady] = useState(false);
+
useEffect(() => {
- setHotKeyScope(DEFAULT_CELL_SCOPE.scope);
- }, [setHotKeyScope]);
+ if (!isReady) {
+ setHotKeyScope(DEFAULT_CELL_SCOPE.scope);
+ setIsReady(true);
+ }
+ }, [isReady, setHotKeyScope]);
return (
-
+ {isReady && }
);
@@ -136,8 +140,7 @@ export const Enter: Story = {
expect(enterJestFn).toHaveBeenCalledTimes(0);
- await canvas.findByPlaceholderText('Enter text');
- await sleep(50);
+ await canvas.findByTestId('is-ready-marker');
await userEvent.keyboard('{enter}');
await waitFor(() => {
@@ -152,7 +155,7 @@ export const Escape: Story = {
expect(escapeJestfn).toHaveBeenCalledTimes(0);
- await canvas.findByPlaceholderText('Enter text');
+ await canvas.findByTestId('is-ready-marker');
await userEvent.keyboard('{esc}');
await waitFor(() => {
@@ -164,11 +167,11 @@ export const Escape: Story = {
export const ClickOutside: Story = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
- await canvas.findByPlaceholderText('Enter text');
expect(clickOutsideJestFn).toHaveBeenCalledTimes(0);
const emptyDiv = canvas.getByTestId('data-field-input-click-outside-div');
+ await canvas.findByTestId('is-ready-marker');
await userEvent.click(emptyDiv);
@@ -182,7 +185,7 @@ export const Tab: Story = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
- await canvas.findByPlaceholderText('Enter text');
+ await canvas.findByTestId('is-ready-marker');
expect(tabJestFn).toHaveBeenCalledTimes(0);
@@ -198,7 +201,7 @@ export const ShiftTab: Story = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
- await canvas.findByPlaceholderText('Enter text');
+ await canvas.findByTestId('is-ready-marker');
expect(shiftTabJestFn).toHaveBeenCalledTimes(0);
diff --git a/packages/twenty-front/src/modules/settings/playground/components/PlaygroundSetupForm.tsx b/packages/twenty-front/src/modules/settings/playground/components/PlaygroundSetupForm.tsx
index 38c91ea80..75eaf5d32 100644
--- a/packages/twenty-front/src/modules/settings/playground/components/PlaygroundSetupForm.tsx
+++ b/packages/twenty-front/src/modules/settings/playground/components/PlaygroundSetupForm.tsx
@@ -1,4 +1,4 @@
-import { PLAYGROUND_SETUP_SELECT_OPTIONS } from '@/settings/playground/constants/PlaygroundSetupSelectOptions';
+import { SETTINGS_PLAYGROUND_FORM_SCHEMA_SELECT_OPTIONS } from '@/settings/playground/constants/SettingsPlaygroundFormSchemaSelectOptions';
import { playgroundApiKeyState } from '@/settings/playground/states/playgroundApiKeyState';
import { PlaygroundSchemas } from '@/settings/playground/types/PlaygroundSchemas';
import { PlaygroundTypes } from '@/settings/playground/types/PlaygroundTypes';
@@ -133,10 +133,12 @@ export const PlaygroundSetupForm = () => {