@atlaskit/form 12.4.1 → 12.5.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/form
 
+## 12.5.0
+
+### Minor Changes
+
+- [`c22bdb7c0b0f8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c22bdb7c0b0f8) -
+  [ux] Added support for focusing error fields containing react-select when submitting with errors
+
 ## 12.4.1
 
 ### Patch Changes

package/dist/cjs/form.js

@@ -14,6 +14,7 @@ var _finalForm = require("final-form");
 var _finalFormFocus = _interopRequireDefault(require("final-form-focus"));
 var _set = _interopRequireDefault(require("lodash/set"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _utils = require("./utils");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 /**
  * __Form context__
@@ -69,7 +70,7 @@ function Form(props) {
       });
       (0, _finalFormFocus.default)(function () {
         return formRef.current ? Array.from(formRef.current.querySelectorAll('input')) : [];
-      })(finalForm);
+      }, (0, _platformFeatureFlags.fg)('platform-form-field-error-focus') ? _utils.getFirstErrorField : undefined)(finalForm);
       return finalForm;
     }),
     _useState2 = (0, _slicedToArray2.default)(_useState, 1),

package/dist/cjs/utils.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getFirstErrorField = void 0;
+var _finalForm = require("final-form");
+var getFirstErrorField = exports.getFirstErrorField = function getFirstErrorField(inputs, errors) {
+  // Guaranteed to be of type HTMLInputElement[] due to getInputs function overrided in createDecorator
+  var htmlInputs = inputs;
+  return htmlInputs.find(function (input) {
+    // If input is hidden, do not focus
+    if (input.type === 'hidden') {
+      return false;
+    }
+
+    // If input ID matches the error, focus
+    if (input.id && (0, _finalForm.getIn)(errors, input.id)) {
+      return true;
+    }
+
+    // Default to base behavior
+    return input.name && (0, _finalForm.getIn)(errors, input.name);
+  });
+};

package/dist/es2019/form.js

@@ -4,6 +4,7 @@ import { createForm } from 'final-form';
 import createDecorator from 'final-form-focus';
 import set from 'lodash/set';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { getFirstErrorField } from './utils';
 /**
  * __Form context__
  *
@@ -51,7 +52,7 @@ export default function Form(props) {
         }
       }
     });
-    createDecorator(() => formRef.current ? Array.from(formRef.current.querySelectorAll('input')) : [])(finalForm);
+    createDecorator(() => formRef.current ? Array.from(formRef.current.querySelectorAll('input')) : [], fg('platform-form-field-error-focus') ? getFirstErrorField : undefined)(finalForm);
     return finalForm;
   });
   const [state, setState] = useState({

package/dist/es2019/utils.js

@@ -0,0 +1,19 @@
+import { getIn } from 'final-form';
+export const getFirstErrorField = (inputs, errors) => {
+  // Guaranteed to be of type HTMLInputElement[] due to getInputs function overrided in createDecorator
+  let htmlInputs = inputs;
+  return htmlInputs.find(function (input) {
+    // If input is hidden, do not focus
+    if (input.type === 'hidden') {
+      return false;
+    }
+
+    // If input ID matches the error, focus
+    if (input.id && getIn(errors, input.id)) {
+      return true;
+    }
+
+    // Default to base behavior
+    return input.name && getIn(errors, input.name);
+  });
+};

package/dist/esm/form.js

@@ -5,6 +5,7 @@ import { createForm } from 'final-form';
 import createDecorator from 'final-form-focus';
 import set from 'lodash/set';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { getFirstErrorField } from './utils';
 /**
  * __Form context__
  *
@@ -59,7 +60,7 @@ export default function Form(props) {
       });
       createDecorator(function () {
         return formRef.current ? Array.from(formRef.current.querySelectorAll('input')) : [];
-      })(finalForm);
+      }, fg('platform-form-field-error-focus') ? getFirstErrorField : undefined)(finalForm);
       return finalForm;
     }),
     _useState2 = _slicedToArray(_useState, 1),

package/dist/esm/utils.js

@@ -0,0 +1,19 @@
+import { getIn } from 'final-form';
+export var getFirstErrorField = function getFirstErrorField(inputs, errors) {
+  // Guaranteed to be of type HTMLInputElement[] due to getInputs function overrided in createDecorator
+  var htmlInputs = inputs;
+  return htmlInputs.find(function (input) {
+    // If input is hidden, do not focus
+    if (input.type === 'hidden') {
+      return false;
+    }
+
+    // If input ID matches the error, focus
+    if (input.id && getIn(errors, input.id)) {
+      return true;
+    }
+
+    // Default to base behavior
+    return input.name && getIn(errors, input.name);
+  });
+};

package/dist/types/utils.d.ts

@@ -0,0 +1,2 @@
+import type { FocusableInput } from 'final-form-focus';
+export declare const getFirstErrorField: (inputs: FocusableInput[], errors: Object) => HTMLInputElement | undefined;

package/dist/types-ts4.5/utils.d.ts

@@ -0,0 +1,2 @@
+import type { FocusableInput } from 'final-form-focus';
+export declare const getFirstErrorField: (inputs: FocusableInput[], errors: Object) => HTMLInputElement | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/form",
-	"version": "12.4.1",
+	"version": "12.5.0",
 	"description": "A form allows users to input information.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -119,6 +119,9 @@
 		},
 		"platform_design-system-team_checkbox-field-spread": {
 			"type": "boolean"
+		},
+		"platform-form-field-error-focus": {
+			"type": "boolean"
 		}
 	}
 }