diff --git a/lib/src/date-input/types.ts b/lib/src/date-input/types.ts
index 967dc7415..f2d6a9909 100644
--- a/lib/src/date-input/types.ts
+++ b/lib/src/date-input/types.ts
@@ -47,6 +47,8 @@ type Props = {
disabled?: boolean;
/**
* If true, the component will not be mutable, meaning the user can not edit the control.
+ * The date picker cannot be opened either. In addition, the clear action will not be displayed
+ * even if the flag is set to true.
*/
readOnly?: boolean;
/**
diff --git a/lib/src/number-input/NumberInput.stories.tsx b/lib/src/number-input/NumberInput.stories.tsx
index a3e71034b..19778c809 100644
--- a/lib/src/number-input/NumberInput.stories.tsx
+++ b/lib/src/number-input/NumberInput.stories.tsx
@@ -32,6 +32,39 @@ export const Chromatic = () => (
+
+
+
+
+
+
+
+
+
+
+
+
@@ -42,7 +75,13 @@ export const Chromatic = () => (
-
+
@@ -61,7 +100,13 @@ export const Chromatic = () => (
-
+
diff --git a/lib/src/number-input/NumberInput.test.js b/lib/src/number-input/NumberInput.test.js
index 98395e746..d5c05f45b 100644
--- a/lib/src/number-input/NumberInput.test.js
+++ b/lib/src/number-input/NumberInput.test.js
@@ -27,6 +27,28 @@ describe("Number input component tests", () => {
expect(number.disabled).toBeTruthy();
});
+ test("Number input is read only and cannot be incremented or decremented using the actions", () => {
+ const { getByLabelText, getAllByRole } = render();
+ const number = getByLabelText("Number label");
+ expect(number.readOnly).toBeTruthy();
+ const decrement = getAllByRole("button")[0];
+ userEvent.click(decrement);
+ expect(number.value).toBe("");
+ const increment = getAllByRole("button")[1];
+ userEvent.click(increment);
+ expect(number.value).toBe("");
+ });
+
+ test("Number input is read only and cannot be incremented or decremented using the arrow keys", () => {
+ const { getByLabelText } = render();
+ const number = getByLabelText("Number label");
+ expect(number.readOnly).toBeTruthy();
+ fireEvent.keyDown(number, { keyCode: 38 });
+ expect(number.value).toBe("");
+ fireEvent.keyDown(number, { keyCode: 40 });
+ expect(number.value).toBe("");
+ });
+
test("Number input is optional", () => {
const { getByText } = render();
expect(getByText("(Optional)")).toBeTruthy();
diff --git a/lib/src/number-input/NumberInput.tsx b/lib/src/number-input/NumberInput.tsx
index eed8ac5ef..af4122fe0 100644
--- a/lib/src/number-input/NumberInput.tsx
+++ b/lib/src/number-input/NumberInput.tsx
@@ -23,6 +23,7 @@ const DxcNumberInput = React.forwardRef(
placeholder,
disabled,
optional,
+ readOnly,
prefix,
suffix,
min,
@@ -49,6 +50,7 @@ const DxcNumberInput = React.forwardRef(
placeholder={placeholder}
disabled={disabled}
optional={optional}
+ readOnly={readOnly}
prefix={prefix}
suffix={suffix}
error={error}
diff --git a/lib/src/number-input/types.ts b/lib/src/number-input/types.ts
index 00c753570..923ead464 100644
--- a/lib/src/number-input/types.ts
+++ b/lib/src/number-input/types.ts
@@ -42,6 +42,12 @@ type Props = {
* functions when it has not been filled.
*/
optional?: boolean;
+ /**
+ * If true, the component will not be mutable, meaning the user can
+ * not edit the control. The value won't change when pressing on the
+ * up or down arrows and neither on the spin buttons.
+ */
+ readOnly?: boolean;
/**
* Prefix to be placed before the number value.
*/
diff --git a/lib/src/text-input/TextInput.test.js b/lib/src/text-input/TextInput.test.js
index b54684e16..2f012beb8 100644
--- a/lib/src/text-input/TextInput.test.js
+++ b/lib/src/text-input/TextInput.test.js
@@ -493,7 +493,7 @@ describe("TextInput component synchronous autosuggest tests", () => {
);
const input = getByRole("combobox");
- fireEvent.focus(input);
+ userEvent.click(input);
const list = getByRole("listbox");
expect(list).toBeTruthy();
expect(getByText("Afghanistan")).toBeTruthy();
@@ -522,6 +522,18 @@ describe("TextInput component synchronous autosuggest tests", () => {
expect(getByText("arbados")).toBeTruthy();
});
+ test("Read-only text input does not open the suggestions list", () => {
+ const onChange = jest.fn();
+ const { getByRole, queryByRole } = render(
+
+ );
+ const input = getByRole("combobox");
+ fireEvent.focus(input);
+ expect(queryByRole("listbox")).toBeFalsy();
+ userEvent.click(input);
+ expect(queryByRole("listbox")).toBeFalsy();
+ });
+
test("Autosuggest displays filtered when the input has a default value", () => {
const { getByRole, getByText, getAllByText } = render(
(
case "Down":
case "ArrowDown":
event.preventDefault();
- if (numberInputContext?.typeNumber === "number") {
+ if (numberInputContext?.typeNumber === "number")
decrementNumber();
- } else {
+ else {
openSuggestions();
if (!isAutosuggestError && !isSearching && filteredSuggestions.length > 0) {
changeVisualFocusIndex((visualFocusedSuggIndex) => {
@@ -201,9 +201,9 @@ const DxcTextInput = React.forwardRef(
case "Up":
case "ArrowUp":
event.preventDefault();
- if (numberInputContext?.typeNumber === "number") {
+ if (numberInputContext?.typeNumber === "number")
incrementNumber();
- } else {
+ else {
openSuggestions();
if (!isAutosuggestError && !isSearching && filteredSuggestions.length > 0) {
changeVisualFocusIndex((visualFocusedSuggIndex) => {
@@ -402,8 +402,8 @@ const DxcTextInput = React.forwardRef(
placeholder={placeholder}
onBlur={handleInputOnBlur}
onChange={handleInputOnChange}
- onFocus={openSuggestions}
- onKeyDown={handleInputOnKeyDown}
+ onFocus={!readOnly ? openSuggestions : undefined}
+ onKeyDown={!readOnly ? handleInputOnKeyDown : undefined}
onMouseDown={(event) => {
event.stopPropagation();
}}
@@ -457,7 +457,7 @@ const DxcTextInput = React.forwardRef(
{
event.stopPropagation();
}}
@@ -472,7 +472,7 @@ const DxcTextInput = React.forwardRef(
{
event.stopPropagation();
}}
diff --git a/lib/src/text-input/types.ts b/lib/src/text-input/types.ts
index 45790c045..118b90802 100644
--- a/lib/src/text-input/types.ts
+++ b/lib/src/text-input/types.ts
@@ -62,6 +62,8 @@ type Props = {
disabled?: boolean;
/**
* If true, the component will not be mutable, meaning the user can not edit the control.
+ * In addition, the clear action will not be displayed even if the flag is set to true
+ * and the custom action will not execute its onClick event.
*/
readOnly?: boolean;
/**
diff --git a/website/screens/components/number-input/code/NumberInputCodePage.tsx b/website/screens/components/number-input/code/NumberInputCodePage.tsx
index cfaa92348..d5ed363e3 100644
--- a/website/screens/components/number-input/code/NumberInputCodePage.tsx
+++ b/website/screens/components/number-input/code/NumberInputCodePage.tsx
@@ -8,6 +8,7 @@ import controlled from "./examples/controlled";
import uncontrolled from "./examples/uncontrolled";
import errorUsage from "./examples/errorHandling";
import HeaderDescriptionCell from "@/common/HeaderDescriptionCell";
+import StatusTag from "@/common/StatusTag";
const sections = [
{
@@ -78,6 +79,21 @@ const sections = [
been filled.
+
+
+
+ NewreadOnly: boolean
+
+ |
+
+ false
+ |
+
+ If true, the component will not be mutable, meaning the user can
+ not edit the control. The value won't change when pressing on the
+ up or down arrows and neither on the spin buttons.
+ |
+
prefix: string |
|