Merge pull request Shopify#2101 from Shopify/fix-confirmation-prompts

Fix confirmation prompts scrolling
williamlfish · Jun 6, 2023 · 4746f68 · 4746f68
2 parents ce84153 + 316d488
commit 4746f68
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 2 deletions.
diff --git a/packages/cli-kit/src/private/node/ui/components/SelectPrompt.test.tsx b/packages/cli-kit/src/private/node/ui/components/SelectPrompt.test.tsx
@@ -17,6 +17,7 @@ vi.mock('ink', async () => {
 })
 
 const ARROW_DOWN = '\u001B[B'
+const ARROW_UP = '\u001B[A'
 const ENTER = '\r'
 
 beforeEach(() => {
@@ -345,6 +346,46 @@ describe('SelectPrompt', async () => {
     `)
   })
 
+  test('allows selecting a different option after having selected an option with a falsy value', async () => {
+    const items = [
+      {label: 'yes', value: true},
+      {label: 'no', value: false},
+    ]
+
+    const renderInstance = render(
+      <SelectPrompt
+        message="Associate your project with the org Castile Ventures?"
+        choices={items}
+        onSubmit={() => {}}
+      />,
+    )
+
+    await waitForInputsToBeReady()
+    await sendInputAndWaitForChange(renderInstance, ARROW_DOWN)
+
+    expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
+      "?  Associate your project with the org Castile Ventures?
+
+         (1) yes
+      [36m>[39m  [36m(2) no[39m
+
+         [2mPress ↑↓ arrows to select, enter to confirm[22m
+      "
+    `)
+
+    await sendInputAndWaitForChange(renderInstance, ARROW_UP)
+
+    expect(renderInstance.lastFrame()).toMatchInlineSnapshot(`
+      "?  Associate your project with the org Castile Ventures?
+
+      [36m>[39m  [36m(1) yes[39m
+         (2) no
+
+         [2mPress ↑↓ arrows to select, enter to confirm[22m
+      "
+    `)
+  })
+
   test('abortController can be used to exit the prompt from outside', async () => {
     const items = [
       {label: 'a', value: 'a'},

diff --git a/packages/cli-kit/src/private/node/ui/hooks/use-select-state.ts b/packages/cli-kit/src/private/node/ui/hooks/use-select-state.ts
@@ -100,7 +100,7 @@ interface ResetAction<T> {
 const reducer = <T>(state: State<T>, action: Action<T>): State<T> => {
   switch (action.type) {
     case 'select-next-option': {
-      if (!state.value) {
+      if (typeof state.value === 'undefined') {
         return state
       }
 
@@ -142,7 +142,7 @@ const reducer = <T>(state: State<T>, action: Action<T>): State<T> => {
     }
 
     case 'select-previous-option': {
-      if (!state.value) {
+      if (typeof state.value === 'undefined') {
         return state
       }