diff --git a/ui/src/components/InlineEntitySelector.test.tsx b/ui/src/components/InlineEntitySelector.test.tsx index 668cb799eb..1ae6f681bd 100644 --- a/ui/src/components/InlineEntitySelector.test.tsx +++ b/ui/src/components/InlineEntitySelector.test.tsx @@ -129,6 +129,8 @@ describe("InlineEntitySelector", () => { const searchInput = document.querySelector('input[placeholder="Search responsible..."]') as HTMLInputElement | null; expect(searchInput).not.toBeNull(); + expect(searchInput?.className).toContain("text-base"); + expect(document.querySelector("[data-mobile-entity-picker]")).not.toBeNull(); expect(document.activeElement).toBe(searchInput); act(() => { diff --git a/ui/src/components/InlineEntitySelector.tsx b/ui/src/components/InlineEntitySelector.tsx index c251b7ac89..9b3b857f89 100644 --- a/ui/src/components/InlineEntitySelector.tsx +++ b/ui/src/components/InlineEntitySelector.tsx @@ -142,6 +142,7 @@ export const InlineEntitySelector = forwardRef { diff --git a/ui/src/components/SearchableSelect.test.tsx b/ui/src/components/SearchableSelect.test.tsx index bed60f8ec0..7a1364683c 100644 --- a/ui/src/components/SearchableSelect.test.tsx +++ b/ui/src/components/SearchableSelect.test.tsx @@ -130,6 +130,7 @@ describe("SearchableSelect", () => { expect(container.querySelector("[data-option-key='recent:alpha']")).not.toBeNull(); expect(container.querySelector("[data-option-key='all:alpha']")).not.toBeNull(); + expect(container.querySelector("[data-mobile-entity-picker]")).not.toBeNull(); }); it("filters options and returns the selected option object", async () => { diff --git a/ui/src/components/SearchableSelect.tsx b/ui/src/components/SearchableSelect.tsx index cad44cacf9..8fdc8b89f8 100644 --- a/ui/src/components/SearchableSelect.tsx +++ b/ui/src/components/SearchableSelect.tsx @@ -225,6 +225,7 @@ export function SearchableSelect< (null); + const [value, setValue] = useState(""); + + useEffect(() => { + triggerRef.current?.click(); + }, []); + + return ( +
+ +
+ ); +} + +const meta = { + title: "Components/Entity pickers/Mobile", + parameters: { + layout: "fullscreen", + viewport: { defaultViewport: "mobile1" }, + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const AssigneePicker: Story = { + render: () => , +}; + +export const ProjectPicker: Story = { + render: () => , +};