feat: add focus method to text inputs (#932)

Co-authored-by: Lee Chase <lee.chase@uk.ibm.com>

packages/core/src/components/cv-dropdown/cv-dropdown-notes.md

@@ -24,6 +24,10 @@ https://www.carbondesignsystem.com/components/dropdown/code
 - up - diretction of dropdown
 - value - string matching value of one of the options or ''
 
+## Methods
+
+Focus - sets focus to the text dropdown
+
 ### cv-dropdown-item
 
 - value - The value that will be returned upon selection of the dropdown item by users

packages/core/src/components/cv-text-area/cv-text-area-notes.md

@@ -20,6 +20,10 @@ http://www.carbondesignsystem.com/components/text-input/code
 
 Other standard props e.g. disabled and placeholder
 
+## Methods
+
+Focus - sets focus to the text area
+
 ## slots
 
 - helper-text: optional and overrides the helper-text attribute

packages/core/src/components/cv-text-area/cv-text-area.vue

@@ -22,6 +22,7 @@
         v-bind="$attrs"
         :value="value"
         v-on="inputListeners"
+        ref="textarea"
       ></textarea>
     </div>
     <div class="bx--form-requirement" v-if="isInvalid">
@@ -75,6 +76,11 @@ export default {
       this.isInvalid = !!(this.$slots['invalid-message'] || (this.invalidMessage && this.invalidMessage.length));
       this.isHelper = !!(this.$slots['helper-text'] || (this.helperText && this.helperText.length));
     },
+    focus() {
+      this.$nextTick(() => {
+        this.$refs.textarea.focus();
+      });
+    },
   },
 };
 </script>

packages/core/src/components/cv-text-input/cv-text-input-notes.md

@@ -24,6 +24,10 @@ http://www.carbondesignsystem.com/components/text-input/code
 
 Other standard props e.g. disabled and placeholder
 
+## Methods
+
+Focus - sets focus to the text input
+
 ## slots
 
 - helper-text: optional and overrides the helper-text attribute

packages/core/src/components/cv-text-input/cv-text-input.vue

@@ -125,6 +125,11 @@ export default {
         this.$refs.input.value = currentValue;
       });
     },
+    focus() {
+      this.$nextTick(() => {
+        this.$refs.input.focus();
+      });
+    },
   },
 };
 </script>

storybook/stories/cv-dropdown-story.js

@@ -144,6 +144,7 @@ for (const story of storySet) {
       const templateViewString = `
   <sv-template-view
     sv-margin
+    ref="templateView"
     :sv-alt-back="this.$options.propsData.theme !== 'light'"
     sv-source='${templateString.trim()}'>
     <template slot="component">${templateString}</template>
@@ -159,6 +160,7 @@ for (const story of storySet) {
           </select>
         </span>
       </div>
+      <button @click="focus">Call focus method on component</button>
     </template>
   </sv-template-view>
   `;
@@ -177,6 +179,9 @@ for (const story of storySet) {
         },
         methods: {
           actionChange: action('CV Dropdown - change'),
+          focus() {
+            this.$refs.templateView.$slots.component[0].componentInstance.focus();
+          },
         },
         template: templateViewString,
         watch: {

storybook/stories/cv-text-area-story.js

@@ -108,6 +108,7 @@ for (const story of storySet) {
       const templateViewString = `
     <sv-template-view
       sv-margin
+      ref="templateView"
       :sv-alt-back="this.$options.propsData.theme !== 'light'"
       sv-source='${templateString.trim()}'>
       <template slot="component">${templateString}</template>
@@ -117,6 +118,7 @@ for (const story of storySet) {
             <textarea v-model="modelValue"></textarea>
           </label>
         </div>
+        <button @click="focus">Call focus method on component</button>
       </template>
       </sv-template-view>
   `;
@@ -132,6 +134,9 @@ for (const story of storySet) {
         props: settings.props,
         methods: {
           onInput: action('cv-text-area - input event'),
+          focus() {
+            this.$refs.templateView.$slots.component[0].componentInstance.focus();
+          },
         },
       };
     },

storybook/stories/cv-text-input-story.js

@@ -134,6 +134,7 @@ for (const story of storySet) {
       const templateViewString = `
     <sv-template-view
       sv-margin
+      ref="templateView"
       :sv-alt-back="this.$options.propsData.theme !== 'light'"
       sv-source='${templateString.trim()}'>
       <template slot="component">${templateString}</template>
@@ -143,6 +144,7 @@ for (const story of storySet) {
             <input type="text" v-model="modelValue" />
           </label>
         </div>
+        <button @click="focus">Call focus method on component</button>
       </template>
     </sv-template-view>
   `;
@@ -158,6 +160,9 @@ for (const story of storySet) {
         props: settings.props,
         methods: {
           onInput: action('cv-text-input - input event'),
+          focus() {
+            this.$refs.templateView.$slots.component[0].componentInstance.focus();
+          },
         },
       };
     },

storybook/stories/cv-tooltip-story.js

@@ -96,6 +96,7 @@ for (const story of storySet) {
 
       const templateViewString = `
     <sv-template-view
+      ref="templateView"
       sv-margin
       sv-source='${templateString.trim()}'
       sv-position="center"
@@ -114,10 +115,10 @@ for (const story of storySet) {
         props: settings.props,
         methods: {
           show() {
-            this.$children[0].$children[0].$children[0].show();
+            this.$refs.templateView.$slots.component[0].componentInstance.show();
           },
           hide() {
-            this.$children[0].$children[0].$children[0].hide();
+            this.$refs.templateView.$slots.component[0].componentInstance.hide();
           },
         },
       };