Merge pull request #20 from geoblink/feature/CORE-7965-Geo-input-fixe…

…d-width-dropdown

Feature/core 7965 geo input fixed width dropdown

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 29.2.1
+
+Fix:
+
+- `GeoDropdown` Add `repositionOnUpdate` prop to reposition popup on update hook
+
 ## 29.2.0
 
 New:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoblink/design-system",
-  "version": "29.2.0",
+  "version": "29.2.1",
   "description": "Geoblink Design System for Vue.js",
   "author": "Geoblink <contact@geoblink.com>",
   "main": "dist/system.js",

src/elements/GeoDropdown/GeoDropdown.vue

@@ -124,6 +124,14 @@ export default {
     popupClass: {
       type: [String, Array, Object],
       required: false
+    },
+
+    /**
+     * Whether the popup's position should be recalculated when the component updates
+     */
+    repositionOnUpdate: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -233,6 +241,11 @@ export default {
   mounted () {
     this.reattachPopupToDocumentBody()
   },
+  updated () {
+    if (!this.repositionOnUpdate) return
+    this.repositionPopup()
+    this.$nextTick(this.repositionPopup.bind(this))
+  },
   beforeDestroy () {
     this.removePopupFromDOM()
   },

src/elements/GeoEditableInput/GeoEditableInput.examples.md

@@ -243,6 +243,66 @@ export default {
 }
 </script>
 
+<style>
+.input-demo__container {
+  width: 200px;
+}
+</style>
+```
+
+### Input with numerical type
+
+```vue live
+<template>
+  <div class="element-demo">
+    <div class="element-demo__block" style="justify-content: space-around;">
+      <div class="input-demo__container">
+        <geo-editable-input
+          v-model="inputNumericalValue"
+          :cancel-icon="['fas', 'times']"
+          :save-icon="['fas', 'check']"
+          :showButtons="showButtons"
+          :style="{
+            width: inputNumericalValue && inputNumericalValue.length + 4 + 'ch'
+          }"
+          type="number"
+          input-type="normal"
+          placeholder="Placeholder"
+          @click="enterEditMode()"
+          @click-outside="hideButtons()"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      showButtons: false,
+      isLoading: false,
+      inputNumericalValue: ''
+    }
+  },
+  methods: {
+    enterEditMode () {
+      this.showButtons = true
+    },
+    hideButtons () {
+      this.showButtons = false
+    },
+    cancel () {
+      this.hideButtons()
+    },
+    saveData () {
+      this.isLoading = true
+      setTimeout(() => this.isLoading = false, 2000)
+    }
+  }
+}
+</script>
+
 <style>
 .input-demo__container {
   width: 200px;

src/elements/GeoEditableInput/GeoEditableInput.vue

@@ -11,6 +11,7 @@
       ref="dropdown"
       :opened="showButtons"
       :popup-class="['geo-editable-input__popup', `geo-editable-input__popup--${inputType}`, popupClass]"
+      :reposition-on-update="true"
       preferred-x-axis-position="right"
       @click-outside="handleClickOutside($event)"
     >