@khanacademy/wonder-blocks-search-field 1.0.1 → 1.0.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-search-field
 
+## 1.0.2
+
+### Patch Changes
+
+-   9ecc853d: Wrap the field in a UniqueIDProvider
+
 ## 1.0.1
 
 ### Patch Changes

package/dist/es/index.js

@@ -1,10 +1,9 @@
 import _extends from '@babel/runtime/helpers/extends';
 import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { StyleSheet } from 'aphrodite';
 import { styles as styles$1 } from '@khanacademy/wonder-blocks-typography';
-import { View } from '@khanacademy/wonder-blocks-core';
+import { IDProvider, View } from '@khanacademy/wonder-blocks-core';
 import IconButton from '@khanacademy/wonder-blocks-icon-button';
 import { TextField } from '@khanacademy/wonder-blocks-form';
 import Icon, { icons } from '@khanacademy/wonder-blocks-icon';
@@ -54,15 +53,21 @@ const SearchField = /*#__PURE__*/React.forwardRef((props, ref) => {
     onFocus,
     onBlur
   } = props,
-        otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+        otherProps = _objectWithoutPropertiesLoose(props, _excluded); // We can't just use ref.current to clear the input because ref isn't
+  // always being passed in, so we use an innerRef to allow the
+  // handleClear() function to focus on the input element ref.
+
+
+  const innerRef = React.useRef(null);
 
   const handleClear = () => {
+    var _innerRef$current;
+
     // Empty the search text.
     onChange(""); // Focus back on the text field since the clear button disappears after
     // the field is cleared.
 
-    const currentField = ReactDOM.findDOMNode(document.getElementById(id));
-    currentField.focus();
+    innerRef == null ? void 0 : (_innerRef$current = innerRef.current) == null ? void 0 : _innerRef$current.focus();
   };
 
   const maybeRenderClearIconButton = () => {
@@ -79,7 +84,10 @@ const SearchField = /*#__PURE__*/React.forwardRef((props, ref) => {
     });
   };
 
-  return /*#__PURE__*/React.createElement(View, {
+  return /*#__PURE__*/React.createElement(IDProvider, {
+    id: id,
+    scope: "search-field"
+  }, uniqueId => /*#__PURE__*/React.createElement(View, {
     onClick: onClick,
     style: [styles.inputContainer, style]
   }, /*#__PURE__*/React.createElement(Icon, {
@@ -89,7 +97,7 @@ const SearchField = /*#__PURE__*/React.forwardRef((props, ref) => {
     style: styles.searchIcon,
     "aria-hidden": "true"
   }), /*#__PURE__*/React.createElement(TextField, _extends({
-    id: id,
+    id: `${uniqueId}-field`,
     type: "text",
     disabled: disabled,
     light: light,
@@ -97,11 +105,20 @@ const SearchField = /*#__PURE__*/React.forwardRef((props, ref) => {
     onFocus: onFocus,
     onBlur: onBlur,
     placeholder: placeholder,
-    ref: ref,
+    ref: node => {
+      // We have to set the value of both refs to
+      // the HTMLInputElement from TextField.
+      if (ref) {
+        // $FlowIgnore[prop-missing]
+        ref.current = node;
+      }
+
+      innerRef.current = node;
+    },
     value: value,
     style: [styles.inputStyleReset, styles$1.LabelMedium],
     testId: testId
-  }, otherProps)), maybeRenderClearIconButton());
+  }, otherProps)), maybeRenderClearIconButton()));
 });
 const styles = StyleSheet.create({
   inputContainer: {