Merge branch 'master' into fix/spacebar-enable-opened

Author: claytonlin1110

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rc-component/select",
-  "version": "1.6.5",
+  "version": "1.6.10",
   "description": "React Select",
   "engines": {
     "node": ">=8.x"

src/BaseSelect/index.tsx

@@ -468,8 +468,15 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
     const isEnterKey = key === 'Enter';
     const isSpaceKey = key === ' ';
 
-
+    // Enter or Space opens dropdown (ARIA combobox: spacebar should open)
     if (isEnterKey || isSpaceKey) {
+      // Do not submit form when type in the input; prevent Space from scrolling page
+      const isCombobox = mode === 'combobox';
+      const isEditable = isCombobox || showSearch;
+      if ((isSpaceKey && !isEditable) || (isEnterKey && !isCombobox)) {
+        event.preventDefault();
+      }
+
       // We only manage open state here, close logic should handle by list component
       if (!mergedOpen) {
         // Do not submit form when type in the input

src/SelectInput/Content/SingleContent.tsx

@@ -63,6 +63,12 @@ const SingleContent = React.forwardRef<HTMLInputElement, SharedContentProps>(
     }, [combobox, activeValue]);
 
     // ========================== Render ==========================
+    const showHasValueCls =
+      displayValue &&
+      displayValue.label !== null &&
+      displayValue.label !== undefined &&
+      String(displayValue.label).trim() !== '';
+
     // Render value
     const renderValue = displayValue ? (
       hasOptionStyle ? (
@@ -88,7 +94,7 @@ const SingleContent = React.forwardRef<HTMLInputElement, SharedContentProps>(
       <div
         className={clsx(
           `${prefixCls}-content`,
-          displayValue && `${prefixCls}-content-has-value`,
+          showHasValueCls && `${prefixCls}-content-has-value`,
           mergedSearchValue && `${prefixCls}-content-has-search-value`,
           hasOptionStyle && `${prefixCls}-content-has-option-style`,
           classNames?.content,

tests/Select.test.tsx

@@ -273,6 +273,34 @@ describe('Select.Basic', () => {
     expect(container.querySelector('.rc-select-content-has-option-style')).toBeTruthy();
   });
 
+  it('should not add -content-has-value className when value is empty string', () => {
+    const { container } = render(
+      <Select value="">
+        <Option value="1">One</Option>
+      </Select>,
+    );
+    expect(container.querySelector('.rc-select-content-has-value')).toBeFalsy();
+  });
+
+  it('should add -content-has-value className when value is number 0', () => {
+    const { container } = render(
+      <Select value={0}>
+        <Option value={0}>0</Option>
+        <Option value={1}>1</Option>
+      </Select>,
+    );
+    expect(container.querySelector('.rc-select-content-has-value')).toBeTruthy();
+  });
+
+  it('should not add -content-has-value className when value is whitespace string', () => {
+    const { container } = render(
+      <Select value="  ">
+        <Option value="1">One</Option>
+      </Select>,
+    );
+    expect(container.querySelector('.rc-select-content-has-value')).toBeFalsy();
+  });
+
   it('should default select the right option', () => {
     const { container } = render(
       <Select defaultValue="2">
@@ -2957,4 +2985,64 @@ describe('Select.Basic', () => {
 
     expect(selectedItem).not.toHaveAttribute('xxx');
   });
+
+  describe('Space key behavior with showSearch', () => {
+    it('should not call preventDefault on space when showSearch is enabled', () => {
+      const { container } = render(
+        <Select showSearch options={[{ value: 'test', label: 'test' }]} />,
+      );
+
+      const input = container.querySelector('input');
+      input.focus();
+
+      const keyDownEvent = new KeyboardEvent('keydown', {
+        key: ' ',
+        code: 'Space',
+        bubbles: true,
+      });
+      const preventDefaultSpy = jest.spyOn(keyDownEvent, 'preventDefault');
+
+      input.dispatchEvent(keyDownEvent);
+
+      expect(preventDefaultSpy).not.toHaveBeenCalled();
+    });
+
+    it('should call preventDefault on space when showSearch is disabled', () => {
+      const { container } = render(<Select options={[{ value: 'test', label: 'test' }]} />);
+
+      const input = container.querySelector('input');
+      input.focus();
+
+      const keyDownEvent = new KeyboardEvent('keydown', {
+        key: ' ',
+        code: 'Space',
+        bubbles: true,
+      });
+      const preventDefaultSpy = jest.spyOn(keyDownEvent, 'preventDefault');
+
+      input.dispatchEvent(keyDownEvent);
+
+      expect(preventDefaultSpy).toHaveBeenCalled();
+    });
+
+    it('should not call preventDefault on space in combobox mode', () => {
+      const { container } = render(
+        <Select mode="combobox" options={[{ value: 'test', label: 'test' }]} />,
+      );
+
+      const input = container.querySelector('input');
+      input.focus();
+
+      const keyDownEvent = new KeyboardEvent('keydown', {
+        key: ' ',
+        code: 'Space',
+        bubbles: true,
+      });
+      const preventDefaultSpy = jest.spyOn(keyDownEvent, 'preventDefault');
+
+      input.dispatchEvent(keyDownEvent);
+
+      expect(preventDefaultSpy).not.toHaveBeenCalled();
+    });
+  });
 });