feat: Hide the DatePicker button when readOnly is true (#1234)

* feat(datepicker): Hide the datepicker button when readOnly is true * tests(datepicker): Remove two useless comments
SAP · Oct 12, 2020 · 80bb5d6 · 80bb5d6
1 parent 021b910
commit 80bb5d6
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 33 deletions.
diff --git a/src/DatePicker/DatePicker.js b/src/DatePicker/DatePicker.js
@@ -411,8 +411,6 @@ class DatePicker extends Component {
             footerButtonProps?.className
         );
 
-        const disableButton = disabled || readOnly;
-
         const inputGroup = (
             <InputGroup
                 {...inputGroupProps}
@@ -432,16 +430,18 @@ class DatePicker extends Component {
                     placeholder={this.getPlaceHolder(dateFormat)}
                     readOnly={readOnly}
                     value={this.state.formattedDate} />
-                <InputGroup.Addon
-                    {...addonProps}
-                    isButton>
-                    <Button {...buttonProps}
-                        aria-label={buttonLabel}
-                        disabled={disableButton}
-                        glyph='appointment-2'
-                        onClick={this.handleClickButton}
-                        option='transparent' />
-                </InputGroup.Addon>
+                {!readOnly && (
+                    <InputGroup.Addon
+                        {...addonProps}
+                        isButton>
+                        <Button {...buttonProps}
+                            aria-label={buttonLabel}
+                            disabled={disabled}
+                            glyph='appointment-2'
+                            onClick={this.handleClickButton}
+                            option='transparent' />
+                    </InputGroup.Addon>
+                )}
             </InputGroup>
         );
 
@@ -519,7 +519,7 @@ class DatePicker extends Component {
                     control={inputGroup}
                     disableKeyPressHandler
                     disableTriggerOnClick
-                    disabled={disableButton}
+                    disabled={disabled || readOnly}
                     modalManager={modalManager}
                     noArrow
                     onClickOutside={this.handleOutsideClickAndEscape}

diff --git a/src/DatePicker/DatePicker.test.js b/src/DatePicker/DatePicker.test.js
@@ -650,6 +650,29 @@ describe('<DatePicker />', () => {
             expect(wrapper.find('.fd-list__message').length).toBe(1);
         });
     });
+    describe('readOnly', () => {
+        test('should not render an inputGroup.Addon button if it is readOnly', () => {
+            wrapper = mount(<DatePicker readOnly />);
+            expect(wrapper.find('button').length).toBe(0);
+        });
+
+        test('should disabled the popover when readOnly is true', () => {
+            wrapper = mount(<DatePicker readOnly />);
+            expect(wrapper.find('Popover').props().disabled).toBe(true);
+
+            expect(wrapper.find('button').length).toBe(0);
+        });
+
+        test('should render an inputGroup.Addon button if it is not readOnly', () => {
+            wrapper = mount(<DatePicker />);
+            expect(wrapper.find('button').length).toBe(1);
+        });
+
+        test('should keep the popover when readOnly is true', () => {
+            wrapper = mount(<DatePicker />);
+            expect(wrapper.find('Popover').props().disabled).not.toBeDefined();
+        });
+    });
 });
 function simulateBlur() {
     let event = new MouseEvent('mousedown', { target: document.querySelector('body') });

diff --git a/src/DatePicker/__stories__/DatePicker.stories.js b/src/DatePicker/__stories__/DatePicker.stories.js
@@ -82,7 +82,7 @@ export const disabled = () => (
 disabled.storyName = 'Disabled';
 
 export const readOnly = () => (
-    <DatePicker readOnly />
+    <DatePicker defaultValue='12/12/2012' readOnly />
 );
 
 

diff --git a/src/DatePicker/__stories__/__snapshots__/DatePicker.stories.storyshot b/src/DatePicker/__stories__/__snapshots__/DatePicker.stories.storyshot
@@ -1317,7 +1317,7 @@ exports[`Storyshots Component API/DatePicker ReadOnly 1`] = `
   dir="ltr"
 >
   <div
-    defaultValue=""
+    defaultValue="12/12/2012"
     onChange={[Function]}
   >
     <div
@@ -1345,25 +1345,8 @@ exports[`Storyshots Component API/DatePicker ReadOnly 1`] = `
               placeholder="MM/DD/YYYY"
               readOnly={true}
               type="text"
-              value=""
+              value="12/12/2012"
             />
-            <span
-              className="fd-input-group__addon fd-input-group__addon--button"
-            >
-              <button
-                aria-label="Choose date"
-                className="fd-button fd-button--transparent is-disabled fd-input-group__button"
-                disabled={true}
-                onClick={[Function]}
-                type="button"
-              >
-                <i
-                  aria-hidden={true}
-                  className="sap-icon--appointment-2"
-                  role="img"
-                />
-              </button>
-            </span>
           </div>
         </div>
       </div>