Skip to content

Commit 5517e5a

Browse files
authored
Add readonly prop to Input (#833)
* Add readonly prop to Input * Clarify plaintext prop in docstring * Add regression test for readonly prop of Input
1 parent 332cb5c commit 5517e5a

File tree

2 files changed

+15
-2
lines changed

2 files changed

+15
-2
lines changed

src/components/input/Input.js

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ const Input = props => {
4343
maxlength,
4444
minLength,
4545
minlength,
46+
readonly,
4647
tabIndex,
4748
tabindex,
4849
...otherProps
@@ -163,6 +164,7 @@ const Input = props => {
163164
inputMode={inputmode || inputMode}
164165
maxLength={maxlength || maxLength}
165166
minLength={minlength || minLength}
167+
readOnly={readonly}
166168
tabIndex={tabindex || tabIndex}
167169
size={html_size}
168170
/>
@@ -525,11 +527,20 @@ Input.propTypes = {
525527
]),
526528

527529
/**
528-
* Set to true for a readonly input styled as plain text with the default
529-
* form field styling removed and the correct margins and padding preserved.
530+
* Set to true for an input styled as plain text with the default form field
531+
* styling removed and the correct margins and padding preserved. Typically
532+
* you will want to use this in conjunction with readonly=True.
530533
*/
531534
plaintext: PropTypes.bool,
532535

536+
/**
537+
* Indicates whether the element can be edited.
538+
*/
539+
readonly: PropTypes.oneOfType([
540+
PropTypes.bool,
541+
PropTypes.oneOf(['readOnly', 'readonly', 'READONLY'])
542+
]),
543+
533544
/**
534545
* A hint to the user of what can be entered in the control . The placeholder
535546
* text must not contain carriage returns or line-feeds. Note: Do not use the

src/components/input/__tests__/Input.test.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ describe('Input', () => {
4949
pattern="test-pattern"
5050
placeholder="test-placeholder"
5151
html_size="42"
52+
readonly
5253
step={2}
5354
tabindex="3"
5455
type="text"
@@ -66,6 +67,7 @@ describe('Input', () => {
6667
expect(input).toHaveAttribute('name', 'test-name');
6768
expect(input).toHaveAttribute('pattern', 'test-pattern');
6869
expect(input).toHaveAttribute('placeholder', 'test-placeholder');
70+
expect(input).toHaveAttribute('readonly');
6971
expect(input).toHaveAttribute('size', '42');
7072
expect(input).toHaveAttribute('step', '2');
7173
expect(input).toHaveAttribute('tabindex', '3');

0 commit comments

Comments
 (0)