diff --git a/src/DatePicker/DatePicker.js b/src/DatePicker/DatePicker.js
index 720c560a9..7627612a8 100644
--- 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 = (
-
-
-
+ {!readOnly && (
+
+
+
+ )}
);
@@ -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
index f09316b7b..3e8a8a296 100644
--- a/src/DatePicker/DatePicker.test.js
+++ b/src/DatePicker/DatePicker.test.js
@@ -650,6 +650,29 @@ describe('', () => {
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();
+ expect(wrapper.find('button').length).toBe(0);
+ });
+
+ test('should disabled the popover when readOnly is true', () => {
+ wrapper = mount();
+ 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();
+ expect(wrapper.find('button').length).toBe(1);
+ });
+
+ test('should keep the popover when readOnly is true', () => {
+ wrapper = mount();
+ 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
index c4306ee8e..c2316f3ed 100644
--- 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 = () => (
-
+
);
diff --git a/src/DatePicker/__stories__/__snapshots__/DatePicker.stories.storyshot b/src/DatePicker/__stories__/__snapshots__/DatePicker.stories.storyshot
index ad983b0d7..7443c59a4 100644
--- 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"
>