diff --git a/docs/components/TextInput2View.jsx b/docs/components/TextInput2View.jsx index 342faf7d2..4d7501e87 100644 --- a/docs/components/TextInput2View.jsx +++ b/docs/components/TextInput2View.jsx @@ -287,6 +287,12 @@ export default class TextInput2View extends React.PureComponent { type: "Function", description: "Called when value of input changes", }, + { + name: "onBlur", + type: "Function", + description: "Called when focus is removed from the input", + optional: true, + }, { name: "size", type: "string", diff --git a/src/TextInput2/TextInput2.tsx b/src/TextInput2/TextInput2.tsx index 899c69fde..53669b8fd 100644 --- a/src/TextInput2/TextInput2.tsx +++ b/src/TextInput2/TextInput2.tsx @@ -26,6 +26,7 @@ export interface Props { showErrorOnBlurOnly?: boolean; value: string; onChange: React.ChangeEventHandler; + onBlur?: React.FocusEventHandler; size?: Values; } @@ -66,6 +67,7 @@ const TextInput2: React.FC = ({ obscurable, value, onChange, + onBlur, size, }) => { const id = name; @@ -148,7 +150,10 @@ const TextInput2: React.FC = ({ onChange(e); }} onFocus={() => setIsFocused(true)} - onBlur={() => setIsFocused(false)} + onBlur={(e) => { + setIsFocused(false); + if (onBlur) onBlur(e); + }} /> {errorMessage != null && ( diff --git a/src/TextInput2/TextInput2_test.tsx b/src/TextInput2/TextInput2_test.tsx index c009c40a2..98420f640 100644 --- a/src/TextInput2/TextInput2_test.tsx +++ b/src/TextInput2/TextInput2_test.tsx @@ -143,6 +143,13 @@ describe("TextInput2", () => { }); }); + it("executes onBlur prop if provided", () => { + defaultProps.onBlur = jest.fn(); + const wrapper = shallow(); + getInput(wrapper).simulate("blur"); + expect(defaultProps.onBlur).toHaveBeenCalled(); + }); + // TODO: Test any relevant state changes/event handling/prop-driven rendering. /* it("propagates event", () => {