[ui] fix text-input-row onChange handler and added onFocus and onBlur (…

…#240)

* [ui] fix text-input-row onChange handler and added onFocus and onBlur

* [ui] version upgraded

libs/juno-ui-components/package.json

@@ -5,7 +5,7 @@
   "module": "build/index.js",
   "source": "src/index.js",
   "style": "lib/esm/styles.css",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "files": [
     "src",
     "lib",

libs/juno-ui-components/src/components/TextInputRow/TextInputRow.component.js

@@ -149,6 +149,8 @@ export const TextInputRow = ({
   className,
   disabled,
   onChange,
+  onFocus,
+  onBlur,
   ...props
 }) => {
   const [val, setValue] = useState("")
@@ -183,7 +185,16 @@ export const TextInputRow = ({
 
   const handleChange = (event) => {
     setValue(event.target.value)
-    onChange(event)
+    if (onChange) onChange(event)
+  }
+
+  const handleFocus = () => {
+    setFocus(true)
+    if (onFocus) onFocus()
+  }
+  const handleBlur = () => {
+    setFocus(false)
+    if (onBlur) onBlur()
   }
 
   /* check whether the label is minimized (either has focus and / or has a value) */
@@ -216,9 +227,9 @@ export const TextInputRow = ({
       return ""
     }
   }
-  
+
   const inputrightpadding = () => {
-    if ( isValid || isInvalid ) {
+    if (isValid || isInvalid) {
       return iconpadding
     } else {
       return ""
@@ -258,8 +269,8 @@ export const TextInputRow = ({
           valid={isValid}
           autoFocus={autoFocus}
           onChange={handleChange}
-          onFocus={() => setFocus(true)}
-          onBlur={() => setFocus(false)}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
           className={`${getInputStyles(
             variant,
             minimizedLabel(variant, val, focus)
@@ -313,6 +324,10 @@ TextInputRow.propTypes = {
   disabled: PropTypes.bool,
   /** Pass a handler to the input element */
   onChange: PropTypes.func,
+  /** Pass a handler to the input element */
+  onFocus: PropTypes.func,
+  /** Pass a handler to the input element */
+  onBlur: PropTypes.func,
 }
 
 TextInputRow.defaultProps = {
@@ -333,4 +348,6 @@ TextInputRow.defaultProps = {
   className: "",
   disabled: null,
   onChange: undefined,
+  onFocus: undefined,
+  onBlur: undefined,
 }

libs/juno-ui-components/src/components/TextInputRow/TextInputRow.test.js

@@ -85,7 +85,7 @@ describe("TextInputRow", () => {
     render(<TextInputRow helptext="Helptext goes here" />)
     expect(screen.getByText("Helptext goes here")).toBeInTheDocument()
   })
-  
+
   test("renders a helpt text with a link as passed", async () => {
     render(<TextInputRow helptext={<a href="#">Link</a>} />)
     expect(screen.getByRole("link")).toBeInTheDocument()
@@ -110,53 +110,57 @@ describe("TextInputRow", () => {
     expect(screen.getByRole("textbox")).toBeInTheDocument()
     expect(screen.getByRole("textbox")).toBeDisabled()
   })
-  
+
   test("renders an invalid text input group as passed", async () => {
     render(<TextInputRow invalid />)
     expect(screen.getByRole("textbox")).toBeInTheDocument()
     expect(screen.getByRole("textbox")).toHaveClass("juno-textinput-invalid")
     expect(screen.getByTitle("Dangerous")).toBeInTheDocument()
   })
-  
+
   test("renders an invalid text input group with an error text as passed", async () => {
     render(<TextInputRow errortext="This is an error text" />)
     expect(screen.getByRole("textbox")).toBeInTheDocument()
     expect(screen.getByRole("textbox")).toHaveClass("juno-textinput-invalid")
     expect(screen.getByText("This is an error text")).toBeInTheDocument()
     expect(screen.getByTitle("Dangerous")).toBeInTheDocument()
   })
-  
+
   test("renders a valid text input group as passed", async () => {
     render(<TextInputRow valid />)
     expect(screen.getByRole("textbox")).toBeInTheDocument()
     expect(screen.getByRole("textbox")).toHaveClass("juno-textinput-valid")
     expect(screen.getByTitle("CheckCircle")).toBeInTheDocument()
   })
-  
+
   test("renders a valid text input group with a success text as passed", async () => {
     render(<TextInputRow successtext="This is a success text" />)
     expect(screen.getByRole("textbox")).toBeInTheDocument()
     expect(screen.getByRole("textbox")).toHaveClass("juno-textinput-valid")
     expect(screen.getByText("This is a success text")).toBeInTheDocument()
     expect(screen.getByTitle("CheckCircle")).toBeInTheDocument()
   })
-  
+
   test("renders a focussed text input as passed", async () => {
     render(<TextInputRow autoFocus />)
     expect(screen.getByRole("textbox")).toBeInTheDocument()
     expect(screen.getByRole("textbox")).toHaveFocus()
   })
-  
+
   test("renders a floating variant textinput-row by default", async () => {
     render(<TextInputRow data-testid="textinput-row" />)
     expect(screen.getByTestId("textinput-row")).toBeInTheDocument()
-    expect(screen.getByTestId("textinput-row")).toHaveClass("juno-textinput-row-floating")
+    expect(screen.getByTestId("textinput-row")).toHaveClass(
+      "juno-textinput-row-floating"
+    )
   })
-  
+
   test("renders a stacked variant textinput-row as passed", async () => {
     render(<TextInputRow data-testid="textinput-row" variant="stacked" />)
     expect(screen.getByTestId("textinput-row")).toBeInTheDocument()
-    expect(screen.getByTestId("textinput-row")).toHaveClass("juno-textinput-row-stacked")
+    expect(screen.getByTestId("textinput-row")).toHaveClass(
+      "juno-textinput-row-stacked"
+    )
   })
 
   test("renders all props to the row as passed", async () => {
@@ -167,7 +171,7 @@ describe("TextInputRow", () => {
     )
   })
 
-  test("fires onChange handler as passed", async () => {
+  test("fires onChange handler as passed when set", async () => {
     const handleChange = jest.fn()
     render(<TextInputRow onChange={handleChange} />)
     const input = screen.getByRole("textbox")
@@ -183,4 +187,31 @@ describe("TextInputRow", () => {
       })
     )
   })
+
+  test("fires onFocus handler as passed when set", async () => {
+    const handleFocus = jest.fn()
+    render(<TextInputRow onFocus={handleFocus} />)
+    const input = screen.getByRole("textbox")
+    fireEvent.focus(input)
+    expect(handleFocus).toHaveBeenCalledTimes(1)
+  })
+
+  test("fires onBlur handler as passed when set", async () => {
+    const handleBlur = jest.fn()
+    render(<TextInputRow onBlur={handleBlur} />)
+    const input = screen.getByRole("textbox")
+    fireEvent.focusOut(input)
+    expect(handleBlur).toHaveBeenCalledTimes(1)
+  })
+
+  test("onChange, onFocus, onBlur handlers not required", async () => {
+    render(<TextInputRow data-testid="text-input-row" />)
+    const input = screen.getByRole("textbox")
+    fireEvent.focus(input)
+    expect(screen.getByTestId("text-input-row")).toBeInTheDocument()
+    fireEvent.change(input, { target: { value: "test value a" } })
+    expect(screen.getByTestId("text-input-row")).toBeInTheDocument()
+    fireEvent.focusOut(input)
+    expect(screen.getByTestId("text-input-row")).toBeInTheDocument()
+  })
 })