Merge pull request metabase#7904 from metabase/fix-input-focus-error

Fix 'TypeError: _this2._input.focus is not a function' error

frontend/src/metabase/admin/datamodel/components/database/ColumnItem.jsx

@@ -2,7 +2,7 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { Link, withRouter } from "react-router";
 
-import Input from "metabase/components/Input.jsx";
+import InputBlurChange from "metabase/components/InputBlurChange.jsx";
 import Select from "metabase/components/Select.jsx";
 import Icon from "metabase/components/Icon";
 import { t } from "c-3po";
@@ -61,7 +61,7 @@ export default class Column extends Component {
       <li className="mt1 mb3 flex">
         <div className="flex flex-column flex-full">
           <div>
-            <Input
+            <InputBlurChange
               style={{ minWidth: 420 }}
               className="AdminInput TableEditor-field-name float-left bordered inline-block rounded text-bold"
               type="text"
@@ -89,7 +89,7 @@ export default class Column extends Component {
             </div>
           </div>
           <div className="MetadataTable-title flex flex-column flex-full bordered rounded mt1 mr1">
-            <Input
+            <InputBlurChange
               className="AdminInput TableEditor-field-description"
               type="text"
               value={this.props.field.description || ""}

frontend/src/metabase/admin/datamodel/components/database/MetadataTable.jsx

@@ -5,7 +5,7 @@ import MetricsList from "./MetricsList.jsx";
 import ColumnsList from "./ColumnsList.jsx";
 import SegmentsList from "./SegmentsList.jsx";
 import { t } from "c-3po";
-import Input from "metabase/components/Input.jsx";
+import InputBlurChange from "metabase/components/InputBlurChange.jsx";
 import ProgressBar from "metabase/components/ProgressBar.jsx";
 
 import { normal } from "metabase/lib/colors";
@@ -103,13 +103,13 @@ export default class MetadataTable extends Component {
     return (
       <div className="MetadataTable px3">
         <div className="MetadataTable-title flex flex-column bordered rounded">
-          <Input
+          <InputBlurChange
             className="AdminInput TableEditor-table-name text-bold border-bottom rounded-top"
             type="text"
             value={tableMetadata.display_name || ""}
             onBlurChange={this.onNameChange}
           />
-          <Input
+          <InputBlurChange
             className="AdminInput TableEditor-table-description rounded-bottom"
             type="text"
             value={tableMetadata.description || ""}

frontend/src/metabase/admin/datamodel/containers/FieldApp.jsx

@@ -11,7 +11,7 @@ import _ from "underscore";
 import cx from "classnames";
 import { t } from "c-3po";
 import Icon from "metabase/components/Icon";
-import Input from "metabase/components/Input";
+import InputBlurChange from "metabase/components/InputBlurChange";
 import Select from "metabase/components/Select";
 import SaveStatus from "metabase/components/SaveStatus";
 import Breadcrumbs from "metabase/components/Breadcrumbs";
@@ -320,13 +320,13 @@ export class FieldHeader extends Component {
   render() {
     return (
       <div>
-        <Input
+        <InputBlurChange
           className="h1 AdminInput bordered rounded border-dark block mb1"
           value={this.props.field.display_name}
           onChange={this.onNameChange}
           placeholder={this.props.field.name}
         />
-        <Input
+        <InputBlurChange
           className="text AdminInput bordered input text-measure block full"
           value={this.props.field.description}
           onChange={this.onDescriptionChange}
@@ -449,7 +449,7 @@ export class FieldValueMapping extends Component {
     return (
       <div className="flex align-center">
         <h3>{original}</h3>
-        <Input
+        <InputBlurChange
           className="AdminInput input ml-auto"
           value={mapped}
           onChange={this.onInputChange}

frontend/src/metabase/admin/people/components/GroupsListing.jsx

@@ -11,7 +11,7 @@ import { KEYCODE_ENTER } from "metabase/lib/keyboard";
 import { PermissionsApi } from "metabase/services";
 import { t } from "c-3po";
 import Icon from "metabase/components/Icon.jsx";
-import Input from "metabase/components/Input.jsx";
+import InputBlurChange from "metabase/components/InputBlurChange.jsx";
 import ModalContent from "metabase/components/ModalContent.jsx";
 import Alert from "metabase/components/Alert.jsx";
 import ModalWithTrigger from "metabase/components/ModalWithTrigger.jsx";
@@ -109,7 +109,7 @@ function EditingGroupRow({
   return (
     <tr className="bordered border-brand rounded">
       <td>
-        <Input
+        <InputBlurChange
           className="AdminInput h3"
           type="text"
           autoFocus={true}

frontend/src/metabase/admin/settings/components/SettingsSingleSignOnForm.jsx

@@ -5,7 +5,7 @@ import _ from "underscore";
 import { t, jt } from "c-3po";
 
 import Breadcrumbs from "metabase/components/Breadcrumbs.jsx";
-import Input from "metabase/components/Input.jsx";
+import InputBlurChange from "metabase/components/InputBlurChange.jsx";
 
 export default class SettingsSingleSignOnForm extends Component {
   constructor(props, context) {
@@ -126,7 +126,7 @@ export default class SettingsSingleSignOnForm extends Component {
               </a>
             )}`}
           </p>
-          <Input
+          <InputBlurChange
             className="SettingsInput AdminInput bordered rounded h3"
             type="text"
             value={this.state.clientIDValue}
@@ -139,7 +139,7 @@ export default class SettingsSingleSignOnForm extends Component {
             </div>
             <div className="mt1 bordered rounded inline-block">
               <div className="inline-block px2 h2">@</div>
-              <Input
+              <InputBlurChange
                 className="SettingsInput inline-block AdminInput h3 border-left"
                 type="text"
                 value={this.state.domainValue}

frontend/src/metabase/admin/settings/components/widgets/SettingInput.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import Input from "metabase/components/Input.jsx";
+import InputBlurChange from "metabase/components/InputBlurChange.jsx";
 import cx from "classnames";
 
 const SettingInput = ({
@@ -12,7 +12,7 @@ const SettingInput = ({
   fireOnChange,
   type = "text",
 }) => (
-  <Input
+  <InputBlurChange
     className={cx(" AdminInput bordered rounded h3", {
       SettingsInput: type !== "password",
       SettingsPassword: type === "password",

frontend/src/metabase/components/Header.jsx

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import ReactDOM from "react-dom";
 
-import Input from "metabase/components/Input.jsx";
+import InputBlurChange from "metabase/components/InputBlurChange.jsx";
 import HeaderModal from "metabase/components/HeaderModal.jsx";
 import TitleAndDescription from "metabase/components/TitleAndDescription.jsx";
 import EditBar from "metabase/components/EditBar.jsx";
@@ -79,13 +79,13 @@ export default class Header extends Component {
     if (this.props.isEditingInfo) {
       titleAndDescription = (
         <div className="Header-title flex flex-column flex-full bordered rounded my1">
-          <Input
+          <InputBlurChange
             className="AdminInput text-bold border-bottom rounded-top h3"
             type="text"
             value={this.props.item.name || ""}
             onChange={this.setItemAttribute.bind(this, "name")}
           />
-          <Input
+          <InputBlurChange
             className="AdminInput rounded-bottom h4"
             type="text"
             value={this.props.item.description || ""}

frontend/src/metabase/components/HeaderBar.jsx

@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 
-import Input from "metabase/components/Input.jsx";
+import InputBlurChange from "metabase/components/InputBlurChange.jsx";
 import TitleAndDescription from "metabase/components/TitleAndDescription.jsx";
 import { t } from "c-3po";
 import cx from "classnames";
@@ -27,15 +27,15 @@ export default class Header extends Component {
     if (isEditing) {
       titleAndDescription = (
         <div className="Header-title flex flex-column flex-full bordered rounded my1">
-          <Input
+          <InputBlurChange
             className="AdminInput text-bold border-bottom rounded-top h3"
             type="text"
             value={name}
             onChange={e =>
               this.props.setItemAttributeFn("name", e.target.value)
             }
           />
-          <Input
+          <InputBlurChange
             className="AdminInput rounded-bottom h4"
             type="text"
             value={description}

frontend/src/metabase/components/Input.jsx → frontend/src/metabase/components/InputBlurChange.jsx

@@ -3,7 +3,11 @@ import PropTypes from "prop-types";
 
 import _ from "underscore";
 
-export default class Input extends Component {
+/**
+ * A small wrapper around <input>, primarily should be used for the
+ * `onBlurChange` feature, otherwise you should use <input> directly
+ */
+export default class InputBlurChange extends Component {
   constructor(props, context) {
     super(props, context);
     this.onBlur = this.onBlur.bind(this);

frontend/src/metabase/components/ListSearchField.jsx

@@ -2,7 +2,6 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 
 import Icon from "metabase/components/Icon.jsx";
-import Input from "metabase/components/Input.jsx";
 import { t } from "c-3po";
 
 export default class ListSearchField extends Component {
@@ -44,7 +43,7 @@ export default class ListSearchField extends Component {
         <span className="px1">
           <Icon name="search" size={16} />
         </span>
-        <Input
+        <input
           className={inputClassName}
           type="text"
           placeholder={placeholder}

frontend/src/metabase/components/NumericInput.jsx

@@ -2,15 +2,15 @@
 
 import React from "react";
 
-import Input from "metabase/components/Input.jsx";
+import InputBlurChange from "metabase/components/InputBlurChange.jsx";
 
 type Props = {
   value: ?(number | string),
   onChange: (value: ?number) => void,
 };
 
 const NumericInput = ({ value, onChange, ...props }: Props) => (
-  <Input
+  <InputBlurChange
     value={value == null ? "" : String(value)}
     onBlurChange={({ target: { value } }) => {
       value = value ? parseInt(value, 10) : null;

frontend/src/metabase/query_builder/components/filters/pickers/SpecificDatePicker.jsx

@@ -4,7 +4,7 @@ import React, { Component } from "react";
 import PropTypes from "prop-types";
 import { t } from "c-3po";
 import Calendar from "metabase/components/Calendar";
-import Input from "metabase/components/Input";
+import InputBlurChange from "metabase/components/InputBlurChange";
 import Icon from "metabase/components/Icon";
 import ExpandingContent from "metabase/components/ExpandingContent";
 import Tooltip from "metabase/components/Tooltip";
@@ -89,7 +89,7 @@ export default class SpecificDatePicker extends Component {
               "border-right": !calendar,
             })}
           >
-            <Input
+            <InputBlurChange
               placeholder={moment().format("MM/DD/YYYY")}
               className="borderless full p2 h3"
               style={{

frontend/src/metabase/query_builder/components/template_tags/TagEditorParam.jsx

@@ -4,7 +4,7 @@ import _ from "underscore";
 import { connect } from "react-redux";
 
 import Toggle from "metabase/components/Toggle.jsx";
-import Input from "metabase/components/Input.jsx";
+import InputBlurChange from "metabase/components/InputBlurChange.jsx";
 import Select, { Option } from "metabase/components/Select.jsx";
 import ParameterValueWidget from "metabase/parameters/components/ParameterValueWidget.jsx";
 
@@ -122,7 +122,7 @@ export default class TagEditorParam extends Component {
 
         <div className="pb1">
           <h5 className="pb1 text-normal">{t`Filter label`}</h5>
-          <Input
+          <InputBlurChange
             type="text"
             value={tag.display_name}
             className="AdminSelect p1 text-bold text-grey-4 bordered border-med rounded full"

frontend/src/metabase/reference/components/EditableReferenceHeader.jsx

@@ -10,7 +10,7 @@ import E from "metabase/reference/components/EditButton.css";
 
 import IconBorder from "metabase/components/IconBorder.jsx";
 import Icon from "metabase/components/Icon.jsx";
-import Input from "metabase/components/Input.jsx";
+import InputBlurChange from "metabase/components/InputBlurChange.jsx";
 import Ellipsified from "metabase/components/Ellipsified.jsx";
 import EditButton from "metabase/reference/components/EditButton.jsx";
 
@@ -56,7 +56,7 @@ const EditableReferenceHeader = ({
         }
       >
         {isEditing && name === "Details" ? (
-          <Input
+          <InputBlurChange
             className={S.headerTextInput}
             type="text"
             placeholder={entity.name}

frontend/src/metabase/visualizations/components/settings/ChartSettingInputGroup.jsx

@@ -1,11 +1,11 @@
 import React from "react";
 
-import Input from "metabase/components/Input.jsx";
+import InputBlurChange from "metabase/components/InputBlurChange.jsx";
 
 // value is an array of strings. This component provides one input box per string
 export default function ChartSettingInputGroup({ value: values, onChange }) {
   const inputs = values.map((str, i) => (
-    <Input
+    <InputBlurChange
       key={i}
       className="input block full mb1"
       value={str}

frontend/test/admin/datamodel/FieldApp.integ.spec.js

@@ -35,7 +35,7 @@ import FieldApp, {
   RemappingNamingTip,
   ValueRemappings,
 } from "metabase/admin/datamodel/containers/FieldApp";
-import Input from "metabase/components/Input";
+import InputBlurChange from "metabase/components/InputBlurChange";
 import {
   FieldVisibilityPicker,
   SpecialTypeAndTargetPicker,
@@ -88,11 +88,11 @@ describe("FieldApp", () => {
       const header = fieldApp.find(FieldHeader);
       expect(header.length).toBe(1);
 
-      const nameInput = header.find(Input).at(0);
+      const nameInput = header.find(InputBlurChange).at(0);
       expect(nameInput.props().value).toBe(
         staticFixtureMetadata.fields["1"].display_name,
       );
-      const descriptionInput = header.find(Input).at(1);
+      const descriptionInput = header.find(InputBlurChange).at(1);
       expect(descriptionInput.props().value).toBe(
         staticFixtureMetadata.fields["1"].description,
       );
@@ -109,8 +109,8 @@ describe("FieldApp", () => {
 
       const header = fieldApp.find(FieldHeader);
       expect(header.length).toBe(1);
-      const nameInput = header.find(Input).at(0);
-      const descriptionInput = header.find(Input).at(1);
+      const nameInput = header.find(InputBlurChange).at(0);
+      const descriptionInput = header.find(InputBlurChange).at(1);
 
       expect(nameInput.props().value).toBe(newTitle);
       expect(descriptionInput.props().value).toBe(newDescription);
@@ -437,13 +437,16 @@ describe("FieldApp", () => {
 
       const firstMapping = fieldValueMappings.at(0);
       expect(firstMapping.find("h3").text()).toBe("1");
-      expect(firstMapping.find(Input).props().value).toBe("1");
-      setInputValue(firstMapping.find(Input), "Terrible");
+      expect(firstMapping.find(InputBlurChange).props().value).toBe("1");
+      setInputValue(firstMapping.find(InputBlurChange), "Terrible");
 
       const lastMapping = fieldValueMappings.last();
       expect(lastMapping.find("h3").text()).toBe("5");
-      expect(lastMapping.find(Input).props().value).toBe("5");
-      setInputValue(lastMapping.find(Input), "Extraordinarily awesome");
+      expect(lastMapping.find(InputBlurChange).props().value).toBe("5");
+      setInputValue(
+        lastMapping.find(InputBlurChange),
+        "Extraordinarily awesome",
+      );
 
       const saveButton = valueRemappingsSection.find(ButtonWithStatus);
       clickButton(saveButton);
@@ -464,13 +467,13 @@ describe("FieldApp", () => {
       expect(
         fieldValueMappings
           .first()
-          .find(Input)
+          .find(InputBlurChange)
           .props().value,
       ).toBe("Terrible");
       expect(
         fieldValueMappings
           .last()
-          .find(Input)
+          .find(InputBlurChange)
           .props().value,
       ).toBe("Extraordinarily awesome");
     });