fix(text-field): focus onmousedown of label for more responsive feel (#…

…85)

* fix(text-field): focus onmousedown of label for more responsive feel

docs/components/text-field.md

@@ -14,7 +14,7 @@ title: Text Field
 
 <component
  name="Text area"
- component="text-field"
+ component="text-area"
  variation="text-area"
  >
 </component>

package.json

@@ -51,7 +51,7 @@
  "lerna:clean": "npx lerna run clean",
  "lerna:publish": "npx lerna publish --yes",
  "lerna:version": "npx lerna version --yes",
- "netlify:build": "yarn clean && yarn build && npx lerna run netlify:build"
+ "netlify:build": "yarn clean && yarn build && npx lerna run netlify:build --parallel"
  },
  "dependencies": {},
  "husky": {

packages/core/src/components/text-field/constants.js

@@ -3,12 +3,14 @@ export const CSS_CLASSES = {
  BASE: 'ray-text-field',
  ACTIVE: 'ray-text-field--active',
  EL__INPUT: 'ray-text-field__input',
+ EL__LABEL: 'ray-text-field__label',
  HAS_VALUE: 'ray-text-field--has-value'
  },
  TEXT_AREA: {
  BASE: 'ray-text-area',
  ACTIVE: 'ray-text-area--active',
  EL__INPUT: 'ray-text-area__input',
+ EL__LABEL: 'ray-text-area__label',
  HAS_VALUE: 'ray-text-area--has-value'
  }
 };

packages/core/src/components/text-field/index.js

@@ -24,7 +24,9 @@ class _InputComponent {
  this._inputElement = this._root.querySelector(
  `.${this.constructor.cssClasses.EL__INPUT}`
  );
-
+ this._labelElement = this._root.querySelector(
+ `.${this.constructor.cssClasses.EL__LABEL}`
+ );
  if (!this._inputElement) {
  throw new Error(
  `TextField must have an input element with a class of .${
@@ -41,8 +43,14 @@ class _InputComponent {
  _bindEventListeners() {
  this._inputElement.addEventListener('focus', this.onFocus);
  this._inputElement.addEventListener('blur', this.onBlur);
+ this._labelElement.addEventListener('mousedown', this.onMousedown);
  }
 
+ onMousedown = event => {
+ event.preventDefault();
+ this._inputElement.focus();
+ };
+
  value() {
  // Current value of the TextField
  return this._inputElement.value;
@@ -71,6 +79,7 @@ class _InputComponent {
  // attached. An example of this might be deregistering a resize event from the window object.
  this._inputElement.removeEventListener('focus', this.onFocus);
  this._inputElement.removeEventListener('blur', this.onBlur);
+ this._labelElement.removeEventListener('mousedown', this.onMousedown);
 
  this.constructor.instances.delete(this._root);
  }

packages/core/test/components/text-field.test.js

@@ -75,6 +75,19 @@ describe('TextField', () => {
  textField.destroy();
  });
 
+ test('it focuses to input on mouse down of label', () => {
+ const { textField, textFieldEl } = setupTest();
+
+ textFieldEl
+ .querySelector(`${initSelectorString}__label`)
+ .dispatchEvent(new Event('mousedown'));
+
+ expect(textFieldEl.querySelector(`${initSelectorString}__input`)).toBe(
+ document.activeElement
+ );
+ textField.destroy();
+ });
+
  test('it removes active class on blur', () => {
  const { textField, textFieldEl } = setupTest();
 

packages/docs-app/src/components/ComponentExample/ComponentExample.js

@@ -7,7 +7,7 @@ import bg from '../../content/global/images/bg.svg';
 
 const nameMap = {
  'text-field': 'TextField',
- 'text-area': 'TextField'
+ 'text-area': 'TextArea'
 };
 
 class ComponentExample extends Component {

yarn.lock

@@ -2969,7 +2969,7 @@
  "@xtuc/long" "4.2.2"
 
 "@wework/ray-core@file:packages/core":
- version "0.2.6"
+ version "0.2.16"
 
 "@xtuc/ieee754@^1.2.0":
  version "1.2.0"