Control ArrowUp for Dropdown (#18324)

* fix(Dropdown): 18277 - Disable arrow up on dropdown

* fix: refactor to make it easier to read and include last item

* fix: almost never allow ArrowUp for DropDown, always allow ArrowDown

* fix: add a simple test to verify arrow up and arrow down actions

packages/react/src/components/Dropdown/Dropdown.tsx

@@ -553,7 +553,12 @@ const Dropdown = React.forwardRef(
         if (['Enter'].includes(evt.key) && !selectedItem && !isOpen) {
           setIsFocused(true);
         }
-        if (toggleButtonProps.onKeyDown) {
+
+        // For Dropdowns the arrow up key is only allowed if the Dropdown is open
+        if (
+          toggleButtonProps.onKeyDown &&
+          (evt.key !== 'ArrowUp' || (isOpen && evt.key === 'ArrowUp'))
+        ) {
           toggleButtonProps.onKeyDown(evt);
         }
       },

packages/react/src/components/Dropdown/__tests__/Dropdown-test.js

@@ -180,6 +180,29 @@ describe('Dropdown', () => {
     });
   });
 
+  it('should not open on arrowUp', async () => {
+    let mockProps1 = { ...mockProps };
+    const ref = React.createRef();
+    render(<Dropdown {...mockProps1} readOnly={false} ref={ref} />);
+
+    const button = screen.getByRole('combobox');
+
+    if (button) {
+      assertMenuClosed();
+      // ArrowUp should not open the menu
+      fireEvent.keyDown(button, { key: 'ArrowUp' });
+      assertMenuClosed();
+      // ArrowDown should open the menu
+      fireEvent.keyDown(button, { key: 'ArrowDown' });
+      assertMenuOpen(mockProps1);
+      // ArrowUp is allowed now that the menu is open
+      fireEvent.keyDown(button, { key: 'ArrowUp' });
+      assertMenuOpen(mockProps1);
+    }
+
+    mockProps.onChange.mockClear();
+  });
+
   it('should respect readOnly prop', async () => {
     let onChange = jest.fn();
     let onKeyDown = jest.fn();