fix(issues): fix textarea always grows
check if the textarea overflows before resizing it
This commit is contained in:
		
							parent
							
								
									07eea0f484
								
							
						
					
					
						commit
						54a1287441
					
				| @ -91,14 +91,41 @@ watch( | |||||||
|   { immediate: true }, |   { immediate: true }, | ||||||
| ); | ); | ||||||
| 
 | 
 | ||||||
|  | /** | ||||||
|  |  * Checks if the given HTMLElement overflows | ||||||
|  |  * copied from stackoverflow: https://stackoverflow.com/questions/143815/determine-if-an-html-elements-content-overflows | ||||||
|  |  * @param el The HTMLElement to check | ||||||
|  |  */ | ||||||
|  | function checkOverflow(el: HTMLElement) { | ||||||
|  |   const curOverflow = el.style.overflow; | ||||||
|  |   if (!curOverflow || curOverflow === 'visible') { | ||||||
|  |     el.style.overflow = 'hidden'; | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   const isOverflowing = el.clientWidth < el.scrollWidth || el.clientHeight < el.scrollHeight; | ||||||
|  | 
 | ||||||
|  |   el.style.overflow = curOverflow; | ||||||
|  | 
 | ||||||
|  |   return isOverflowing; | ||||||
|  | } | ||||||
|  | 
 | ||||||
| function resizeTextarea() { | function resizeTextarea() { | ||||||
|   if (!textareaRef.value || !inputWrapperRef.value) { |   if (textareaRef.value === undefined) { | ||||||
|  |     return; // cannot chnge textarea if element is not available | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   if (!multiline) { | ||||||
|  |     return; // textarea wont be displayed if multiline === false | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   if (!checkOverflow(textareaRef.value)) { | ||||||
|     return; |     return; | ||||||
|   } |   } | ||||||
| 
 | 
 | ||||||
|   const scrollHeight = textareaRef.value.scrollHeight + 2; |   const textAreaElement = textareaRef.value!; | ||||||
| 
 | 
 | ||||||
|   inputWrapperRef.value.style.height = `${scrollHeight}px`; |   const scrollHeight = textAreaElement.scrollHeight + 2; | ||||||
|  |   textAreaElement.style.height = `${scrollHeight}px`; | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| const htmlInputType = computed(() => { | const htmlInputType = computed(() => { | ||||||
|  | |||||||
		Loading…
	
		Reference in New Issue
	
	Block a user