Fix combobox closes prematurely (#6461)

* Fix ComboBox closes if input is long and dropdown button is used

Author: snowystinger

packages/@react-aria/overlays/src/useCloseOnScroll.ts

@@ -42,6 +42,13 @@ export function useCloseOnScroll(opts: CloseOnScrollOptions) {
         return;
       }
 
+      // Ignore scroll events on any input or textarea as the cursor position can cause it to scroll
+      // such as in a combobox. Clicking the dropdown button places focus on the input, and if the
+      // text inside the input extends beyond the 'end', then it will scroll so the cursor is visible at the end.
+      if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
+        return;
+      }
+
       let onCloseHandler = onClose || onCloseMap.get(triggerRef.current);
       if (onCloseHandler) {
         onCloseHandler();

packages/react-aria-components/stories/ComboBoxReproductions.stories.tsx

@@ -0,0 +1,39 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {Button, ComboBox, Input, Label, ListBox, ListBoxItem, Popover} from 'react-aria-components';
+import React from 'react';
+import './combobox-reproductions.css';
+
+export default {
+  title: 'React Aria Components'
+};
+
+export const ComboBoxReproductionExample = () => (
+  <ComboBox>
+    <Label>Favorite Animal</Label>
+    <div>
+      <Input />
+      <Button>▼</Button>
+    </div>
+    <Popover>
+      <ListBox>
+        <ListBoxItem>Aardvark</ListBoxItem>
+        <ListBoxItem>Cat</ListBoxItem>
+        <ListBoxItem>Dooooooooooooooooooooooooooooooooog</ListBoxItem>
+        <ListBoxItem>Kangaroo</ListBoxItem>
+        <ListBoxItem>Panda</ListBoxItem>
+        <ListBoxItem>Snake</ListBoxItem>
+      </ListBox>
+    </Popover>
+  </ComboBox>
+);

packages/react-aria-components/stories/combobox-reproductions.css

@@ -0,0 +1,94 @@
+html,
+body,
+#root {
+  padding: 0;
+  margin: 0;
+  height: 100%;
+}
+
+@import "@react-aria/example-theme";
+
+:global(.react-aria-ComboBox) {
+  color: var(--text-color);
+
+  :global(.react-aria-Input) {
+    margin: 0;
+    font-size: 1.072rem;
+    background: var(--field-background);
+    color: var(--field-text-color);
+    border: 1px solid var(--border-color);
+    border-radius: 6px;
+    padding: 0.286rem 2rem 0.286rem 0.571rem;
+    vertical-align: middle;
+
+    &[data-focused] {
+      outline: none;
+      outline: 2px solid var(--focus-ring-color);
+      outline-offset: -1px;
+    }
+  }
+
+  :global(.react-aria-Button) {
+    background: var(--highlight-background);
+    color: var(--highlight-foreground);
+    forced-color-adjust: none;
+    border-radius: 4px;
+    border: none;
+    margin-left: -1.714rem;
+    width: 1.429rem;
+    height: 1.429rem;
+    padding: 0;
+    font-size: 0.857rem;
+    cursor: default;
+
+    &[data-pressed] {
+      box-shadow: none;
+      background: var(--highlight-background);
+    }
+  }
+}
+
+:global(.react-aria-Popover)[data-trigger="ComboBox"] {
+  width: var(--trigger-width);
+
+  :global(.react-aria-ListBox) {
+    display: block;
+    width: unset;
+    max-height: inherit;
+    min-height: unset;
+    border: none;
+
+    :global(.react-aria-Header) {
+      padding-left: 1.571rem;
+    }
+  }
+
+  :global(.react-aria-ListBoxItem) {
+    padding: 0.286rem 0.571rem 0.286rem 1.571rem;
+
+    &[data-focus-visible] {
+      outline: none;
+    }
+
+    &[data-selected] {
+      font-weight: 600;
+      background: unset;
+      color: var(--text-color);
+
+      &::before {
+        content: "✓";
+        content: "✓" / "";
+        alt: " ";
+        position: absolute;
+        top: 4px;
+        left: 4px;
+      }
+    }
+
+    &[data-focused],
+    &[data-pressed] {
+      background: var(--highlight-background);
+      color: var(--highlight-foreground);
+    }
+  }
+}

packages/react-aria-components/test/ComboBox.test.js

@@ -264,10 +264,23 @@ describe('ComboBox', () => {
     let {getByRole} = render(<TestComboBox />);
 
     let button = getByRole('button');
-    await userEvent.click(button);
+    await user.click(button);
     let listbox = getByRole('listbox');
     expect(listbox).toBeInTheDocument();
     fireEvent.scroll(document.body);
     expect(listbox).not.toBeInTheDocument();
   });
+
+  it('should not close on input scrolling for cursor placement', async () => {
+    let {getByRole} = render(<TestComboBox />);
+
+    let input = getByRole('combobox');
+    let button = getByRole('button');
+    await user.click(button);
+    let listbox = getByRole('listbox');
+    expect(listbox).toBeInTheDocument();
+    expect(input).toHaveFocus();
+    fireEvent.scroll(input); // simulate what happens when the text is long and overflows
+    expect(listbox).toBeInTheDocument();
+  });
 });