fix: scrollbar is always visible in resizable textarea

blumilksoftware · Dec 23, 2024 · 66d391f · 66d391f
1 parent 7fae1d2
commit 66d391f
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/resources/js/Helpers/vDynamicTextAreaHeight.ts b/resources/js/Helpers/vDynamicTextAreaHeight.ts
@@ -8,6 +8,7 @@ function initDynamicHeightCalc(input: HTMLTextAreaElement & { _calculateDynamicH
 
   input._calculateDynamicHeight()
   input.style.resize = 'none'
+  input.style.overflowY = 'hidden'
 }
 
 function calculateDynamicHeight(input: HTMLTextAreaElement, binding?: DirectiveBinding<boolean>){
@@ -26,10 +27,10 @@ function removeDynamicHeightCalc(input: HTMLTextAreaElement & { _calculateDynami
   input.removeEventListener('transitionend', input._calculateDynamicHeight)
 }
 
-const vDynamicInputHeight = {
+const vDynamicTextAreaHeight = {
   mounted: initDynamicHeightCalc,
   updated: calculateDynamicHeight,
   unmounted: removeDynamicHeightCalc,
 }
 
-export default vDynamicInputHeight
+export default vDynamicTextAreaHeight
diff --git a/resources/js/components/QuizzesPanel/AnswerComponent.vue b/resources/js/components/QuizzesPanel/AnswerComponent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import CheckDynamicIcon from '@/components/Icons/CheckDynamicIcon.vue'
-import vDynamicInputHeight from '@/Helpers/vDynamicTextAreaHeight'
+import vDynamicTextAreaHeight from '@/Helpers/vDynamicTextAreaHeight'
 import { XMarkIcon } from '@heroicons/vue/24/outline'
 
 defineProps<{ editing: boolean }>()
@@ -30,7 +30,7 @@ const emit = defineEmits<{ delete: [answer:Answer], setCorrect: [answer:Answer]}
       <textarea
         v-else
         v-model="answer.text"
-        v-dynamic-input-height
+        v-dynamic-text-area-height
         placeholder="Wpisz odpowiedź"
         class="h-12 w-full p-2 bg-transparent outline-none border-b border-primary/30 focus:border-primary/60"
       />