From 57f7cae063a207c86322463534b6b14af17e32c5 Mon Sep 17 00:00:00 2001
From: dylankelly <dylan.kelly@dpc.vic.gov.au>
Date: Tue, 26 Nov 2019 13:52:55 +1100
Subject: [PATCH] Fix placeholder not configurable for fieldRplSelect (#601)

* Adds placeholder for rplselect field

* fix rpl-select error with no options

* update snapshots
---
 packages/components/Molecules/Form/Select.vue | 32 ++++++++++---------
 .../Molecules/Form/fields/fieldRplselect.vue  |  7 ++--
 .../__snapshots__/storyshots.test.js.snap     |  2 +-
 3 files changed, 20 insertions(+), 21 deletions(-)

diff --git a/packages/components/Molecules/Form/Select.vue b/packages/components/Molecules/Form/Select.vue
index 35d428d5b..aa2f67462 100644
--- a/packages/components/Molecules/Form/Select.vue
+++ b/packages/components/Molecules/Form/Select.vue
@@ -228,23 +228,25 @@ export default {
       return false
     },
     focusItem (selected) {
-      this.focussed = selected
-      const item = this.$el.querySelector(`#${selected.uuid}`)
-      const listbox = this.$refs.listbox
+      if (selected) {
+        this.focussed = selected
+        const item = this.$el.querySelector(`#${selected.uuid}`)
+        const listbox = this.$refs.listbox
 
-      if (listbox.scrollHeight > listbox.clientHeight) {
-        let scrollBottom = listbox.clientHeight + listbox.scrollTop
-        let elementBottom = item.offsetTop + item.offsetHeight
-        if (elementBottom > scrollBottom) {
-          listbox.scrollTop = elementBottom - listbox.clientHeight
-        } else if (item.offsetTop < listbox.scrollTop) {
-          listbox.scrollTop = item.offsetTop
+        if (listbox.scrollHeight > listbox.clientHeight) {
+          let scrollBottom = listbox.clientHeight + listbox.scrollTop
+          let elementBottom = item.offsetTop + item.offsetHeight
+          if (elementBottom > scrollBottom) {
+            listbox.scrollTop = elementBottom - listbox.clientHeight
+          } else if (item.offsetTop < listbox.scrollTop) {
+            listbox.scrollTop = item.offsetTop
+          }
+        }
+        if (item) {
+          this.$nextTick(function () {
+            item.focus()
+          })
         }
-      }
-      if (item) {
-        this.$nextTick(function () {
-          item.focus()
-        })
       }
     },
     handleKeys (e) {
diff --git a/packages/components/Molecules/Form/fields/fieldRplselect.vue b/packages/components/Molecules/Form/fields/fieldRplselect.vue
index dfd6929e5..ff9319e7b 100644
--- a/packages/components/Molecules/Form/fields/fieldRplselect.vue
+++ b/packages/components/Molecules/Form/fields/fieldRplselect.vue
@@ -49,11 +49,8 @@ export default {
   computed: {
     config () {
       return {
-        multiselect: this.schema.multiselect,
-        placeholder: 'Select',
-        showitems: 4,
-        fieldId: this.getFieldID(this.schema),
-        label: ''
+        ...this.schema,
+        fieldId: this.getFieldID(this.schema)
       }
     }
   }
diff --git a/src/test/__snapshots__/storyshots.test.js.snap b/src/test/__snapshots__/storyshots.test.js.snap
index d607ba5e4..0232c097a 100644
--- a/src/test/__snapshots__/storyshots.test.js.snap
+++ b/src/test/__snapshots__/storyshots.test.js.snap
@@ -5403,7 +5403,7 @@ exports[`RippleStoryshots Molecules/Form Default 1`] = `
                     disabled="disabled"
                     value=""
                   >
-                    Select
+                    Select a single topic
                   </option>
                    
                   <option