@sproutsocial/racine 11.6.1-input-beta.1 → 11.6.1-input-beta.2

package/__flow__/Input/index.js

@@ -52,9 +52,6 @@ type TypeProps = {
     | ((React.ElementRef<any> | HTMLElement) => void),
   onBlur?: (e: SyntheticFocusEvent<HTMLInputElement>) => void,
   onChange?: (e: SyntheticInputEvent<HTMLInputElement>, value: string) => void,
-  /** Input.ClearButton onClick callback. Required when using Input.ClearButton.
-   The component handles returning focus to Input after onClear is called.
-   For controlled Inputs, you must reset "value" yourself.*/
   onClear?: (e: SyntheticEvent<HTMLButtonElement>) => void,
   onFocus?: (e: SyntheticFocusEvent<HTMLInputElement>) => void,
   onKeyDown?: (
@@ -82,10 +79,8 @@ type TypeState = {
 // Using Context so that Input's Input.ClearButton-specific props can be passed to Input.ClearButton,
 // regardless of whether it is manually included as elemAfter or automatically included for type="search" Inputs.
 type TypeInputContext = $Shape<{
-  onClear?: (e: SyntheticEvent<HTMLButtonElement>) => void,
   handleClear: (e: SyntheticEvent<HTMLButtonElement>) => void,
   clearButtonLabel: string,
-  isControlled: boolean,
   hasValue: boolean,
   size: "large" | "small" | "default",
 }>;
@@ -102,10 +97,8 @@ const StyledButton: StyledComponent<any, TypeTheme, *> = styled(Button)`
 
 const ClearButton = () => {
   const {
-    onClear,
     handleClear,
     clearButtonLabel,
-    isControlled,
     hasValue,
     size: inputSize,
   } = React.useContext(InputContext);
@@ -115,12 +108,6 @@ const ClearButton = () => {
     return null;
   }
 
-  // Hide the button when no onClear callback is provided to a controlled Input.
-  // For a controlled component, all the button would do without an onClear is focus the input.
-  if (isControlled && !onClear) {
-    return null;
-  }
-
   // Warn if clearButtonLabel is not included, so that the unlocalized fallback will not be mistaken for a proper label.
   if (!clearButtonLabel) {
     console.warn(
@@ -186,15 +173,18 @@ class Input extends React.Component<TypeProps, TypeState> {
     this.props.onBlur?.(e);
 
   handleClear = (e: SyntheticEvent<HTMLButtonElement>) => {
-    // If the component is uncontrolled, clear its value via ref.
-    if (typeof this.props.value !== "string") {
-      if (this.inputRef.current) {
-        this.inputRef.current.value = "";
-      }
+    const input = this.inputRef.current;
+    if (input) {
+      // Clear the value via ref, then dispatch an input event in order to trigger handleChange
+      input.value = "";
+      const inputEvent = new Event("input", { bubbles: true });
+      input.dispatchEvent(inputEvent);
+
+      // Focus the input, update hasValue, and call any onClear callback
+      input.focus();
+      this.updateState("");
+      this.props.onClear?.(e);
     }
-    this.inputRef.current?.focus();
-    this.props.onClear?.(e);
-    this.updateState("");
   };
 
   handleChange = (e: SyntheticInputEvent<HTMLInputElement>) => {
@@ -214,11 +204,11 @@ class Input extends React.Component<TypeProps, TypeState> {
   handlePaste = (e: SyntheticInputEvent<HTMLInputElement>) =>
     this.props.onPaste?.(e, e.currentTarget.value);
 
-  updateState = (value: string) => {
-    const hasValue = value !== "";
-    const hadValue = this.state.hasValue;
-    // Only update state if the value has changed to avoid unnecessary renders.
-    if (hasValue !== hadValue) {
+  updateState = (inputValue: string) => {
+    const hasValue = inputValue !== "";
+    const previousHasValue = this.state.hasValue;
+    // Only update state if the value of `hasValue` has changed to avoid unnecessary renders.
+    if (hasValue !== previousHasValue) {
       this.setState({ hasValue });
     }
   };
@@ -291,9 +281,7 @@ class Input extends React.Component<TypeProps, TypeState> {
           value={{
             handleClear: this.handleClear,
             hasValue: this.state.hasValue,
-            isControlled: typeof this.props.value === "string",
             clearButtonLabel,
-            onClear,
             size,
           }}
         >

package/__flow__/Input/index.test.js

@@ -85,13 +85,12 @@ describe("Input", () => {
         expect(getByRole("button")).toBeTruthy();
       });
 
-      it("should render a clear button for an uncontrolled search Input only once it is typed in", () => {
+      it("should render a clear button for an uncontrolled search Input only when it has text", () => {
         const { getByRole, queryByRole } = render(
           <Input
             id="name"
             name="name"
             type="search"
-            onClear={jest.fn()}
             clearButtonLabel="Clear search"
           />
         );
@@ -101,6 +100,9 @@ describe("Input", () => {
         expect(input).toHaveFocus();
         userEvent.keyboard("some text");
         expect(getByRole("button")).toBeTruthy();
+        userEvent.tab();
+        userEvent.keyboard("{enter}");
+        expect(queryByRole("button")).toBeFalsy();
       });
 
       it("should not render a clear button for search Inputs if there is no text", () => {

package/commonjs/Input/index.js

@@ -41,22 +41,14 @@ var StyledButton = (0, _styledComponents.default)(_Button.default).withConfig({
 
 var ClearButton = function ClearButton() {
   var _React$useContext = React.useContext(InputContext),
-      onClear = _React$useContext.onClear,
       handleClear = _React$useContext.handleClear,
       clearButtonLabel = _React$useContext.clearButtonLabel,
-      isControlled = _React$useContext.isControlled,
       hasValue = _React$useContext.hasValue,
       inputSize = _React$useContext.size; // Hide the button when there is no text to clear.
 
 
   if (!hasValue) {
     return null;
-  } // Hide the button when no onClear callback is provided to a controlled Input.
-  // For a controlled component, all the button would do without an onClear is focus the input.
-
-
-  if (isControlled && !onClear) {
-    return null;
   } // Warn if clearButtonLabel is not included, so that the unlocalized fallback will not be mistaken for a proper label.
 
 
@@ -106,19 +98,22 @@ var Input = /*#__PURE__*/function (_React$Component) {
     };
 
     _this.handleClear = function (e) {
-      var _this$inputRef$curren;
+      var input = _this.inputRef.current;
 
-      // If the component is uncontrolled, clear its value via ref.
-      if (typeof _this.props.value !== "string") {
-        if (_this.inputRef.current) {
-          _this.inputRef.current.value = "";
-        }
-      }
+      if (input) {
+        // Clear the value via ref, then dispatch an input event in order to trigger handleChange
+        input.value = "";
+        var inputEvent = new Event("input", {
+          bubbles: true
+        });
+        input.dispatchEvent(inputEvent); // Focus the input, update hasValue, and call any onClear callback
+
+        input.focus();
 
-      (_this$inputRef$curren = _this.inputRef.current) == null ? void 0 : _this$inputRef$curren.focus();
-      _this.props.onClear == null ? void 0 : _this.props.onClear(e);
+        _this.updateState("");
 
-      _this.updateState("");
+        _this.props.onClear == null ? void 0 : _this.props.onClear(e);
+      }
     };
 
     _this.handleChange = function (e) {
@@ -143,11 +138,11 @@ var Input = /*#__PURE__*/function (_React$Component) {
       return _this.props.onPaste == null ? void 0 : _this.props.onPaste(e, e.currentTarget.value);
     };
 
-    _this.updateState = function (value) {
-      var hasValue = value !== "";
-      var hadValue = _this.state.hasValue; // Only update state if the value has changed to avoid unnecessary renders.
+    _this.updateState = function (inputValue) {
+      var hasValue = inputValue !== "";
+      var previousHasValue = _this.state.hasValue; // Only update state if the value of `hasValue` has changed to avoid unnecessary renders.
 
-      if (hasValue !== hadValue) {
+      if (hasValue !== previousHasValue) {
         _this.setState({
           hasValue: hasValue
         });
@@ -228,9 +223,7 @@ var Input = /*#__PURE__*/function (_React$Component) {
       value: {
         handleClear: this.handleClear,
         hasValue: this.state.hasValue,
-        isControlled: typeof this.props.value === "string",
         clearButtonLabel: clearButtonLabel,
-        onClear: onClear,
         size: size
       }
     }, elementBefore && /*#__PURE__*/React.createElement(_styles.Accessory, {

package/lib/Input/index.js

@@ -24,22 +24,14 @@ var StyledButton = styled(Button).withConfig({
 
 var ClearButton = function ClearButton() {
   var _React$useContext = React.useContext(InputContext),
-      onClear = _React$useContext.onClear,
       handleClear = _React$useContext.handleClear,
       clearButtonLabel = _React$useContext.clearButtonLabel,
-      isControlled = _React$useContext.isControlled,
       hasValue = _React$useContext.hasValue,
       inputSize = _React$useContext.size; // Hide the button when there is no text to clear.
 
 
   if (!hasValue) {
     return null;
-  } // Hide the button when no onClear callback is provided to a controlled Input.
-  // For a controlled component, all the button would do without an onClear is focus the input.
-
-
-  if (isControlled && !onClear) {
-    return null;
   } // Warn if clearButtonLabel is not included, so that the unlocalized fallback will not be mistaken for a proper label.
 
 
@@ -89,19 +81,22 @@ var Input = /*#__PURE__*/function (_React$Component) {
     };
 
     _this.handleClear = function (e) {
-      var _this$inputRef$curren;
+      var input = _this.inputRef.current;
 
-      // If the component is uncontrolled, clear its value via ref.
-      if (typeof _this.props.value !== "string") {
-        if (_this.inputRef.current) {
-          _this.inputRef.current.value = "";
-        }
-      }
+      if (input) {
+        // Clear the value via ref, then dispatch an input event in order to trigger handleChange
+        input.value = "";
+        var inputEvent = new Event("input", {
+          bubbles: true
+        });
+        input.dispatchEvent(inputEvent); // Focus the input, update hasValue, and call any onClear callback
+
+        input.focus();
 
-      (_this$inputRef$curren = _this.inputRef.current) == null ? void 0 : _this$inputRef$curren.focus();
-      _this.props.onClear == null ? void 0 : _this.props.onClear(e);
+        _this.updateState("");
 
-      _this.updateState("");
+        _this.props.onClear == null ? void 0 : _this.props.onClear(e);
+      }
     };
 
     _this.handleChange = function (e) {
@@ -126,11 +121,11 @@ var Input = /*#__PURE__*/function (_React$Component) {
       return _this.props.onPaste == null ? void 0 : _this.props.onPaste(e, e.currentTarget.value);
     };
 
-    _this.updateState = function (value) {
-      var hasValue = value !== "";
-      var hadValue = _this.state.hasValue; // Only update state if the value has changed to avoid unnecessary renders.
+    _this.updateState = function (inputValue) {
+      var hasValue = inputValue !== "";
+      var previousHasValue = _this.state.hasValue; // Only update state if the value of `hasValue` has changed to avoid unnecessary renders.
 
-      if (hasValue !== hadValue) {
+      if (hasValue !== previousHasValue) {
         _this.setState({
           hasValue: hasValue
         });
@@ -211,9 +206,7 @@ var Input = /*#__PURE__*/function (_React$Component) {
       value: {
         handleClear: this.handleClear,
         hasValue: this.state.hasValue,
-        isControlled: typeof this.props.value === "string",
         clearButtonLabel: clearButtonLabel,
-        onClear: onClear,
         size: size
       }
     }, elementBefore && /*#__PURE__*/React.createElement(Accessory, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/racine",
-  "version": "11.6.1-input-beta.1",
+  "version": "11.6.1-input-beta.2",
   "license": "MIT",
   "files": [
     "__flow__",