Auto grow text areas

assets/popup.html

@@ -22,7 +22,8 @@
         }
 
         textarea {
-            height: calc(1.5em + .75rem + calc(var(--bs-border-width)))
+            height: calc(1.5em + .75rem + calc(var(--bs-border-width)));
+            overflow: hidden;
         }
 
         button {
@@ -182,7 +183,7 @@
 </div>
 
 <div class="text-center">
-    <a href="https://github.com/forgetso/search-replace/releases/tag/1.6.10" target="_blank" class="link-body-emphasis">Version 1.6.10</a>
+    <a href="https://github.com/forgetso/search-replace/releases/tag/1.6.11" target="_blank" class="link-body-emphasis">Version 1.6.11</a>
 </div>
 </body>
 

manifest.json

@@ -46,6 +46,6 @@
     "https://*/*"
   ],
   "update_url": "http://clients2.google.com/service/update2/crx",
-  "version": "1.6.10",
+  "version": "1.6.11",
   "options_page": "assets/options.html"
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "search_and_replace",
-  "version": "1.6.10",
+  "version": "1.6.11",
   "resolutions": {
     "author": "Chris Taylor <[email protected]>"
   },

src/popup.ts

@@ -84,6 +84,13 @@ window.addEventListener('DOMContentLoaded', function () {
         }
     }
 
+    // Handler for auto resizing the textareas
+    for (const elementName of ['searchTerm', 'replaceTerm']) {
+        ;(<HTMLTextAreaElement>document.getElementById(elementName)).addEventListener('input', function () {
+            autoGrow(this)
+        })
+    }
+
     // Click handler for historyContent element. Will take the search term and replace term from the history item and populate the input fields
     ;(<HTMLDivElement>document.getElementById('historyContent')).addEventListener('click', historyItemClickHandler)
 
@@ -99,6 +106,13 @@ async function storeTermsHandler(e) {
     await storeTerms(e, false)
 }
 
+// function to change the height of the textarea to fit the content
+function autoGrow(element) {
+    console.log('change height')
+    element.style.height = ''
+    element.style.height = element.scrollHeight + 'px'
+}
+
 // function to expand or contract the history section
 function historyHeaderClickHandler(e) {
     e.preventDefault()