Improve compatibility with external CSS that includes overflow and background/color rules on pre, in core and autocomplete plugin (Fixes #198)

Co-authored-by: figuerom16 <112363116+figuerom16@users.noreply.github.com>

Author: WebCoder49

code-input.css

@@ -61,32 +61,34 @@ code-input textarea, code-input:not(.code-input_pre-element-styled) pre code, co
   padding-right: var(--padding-right, 16px)!important;
   padding-top: var(--padding-top, 16px)!important;
   padding-bottom: var(--padding-bottom, 16px)!important;
-  border: 0;
+
   min-width: calc(100% - var(--padding-left, 16px) - var(--padding-right, 16px));
   min-height: calc(100% - var(--padding-top, 16px) - var(--padding-bottom, 16px));
-  overflow: hidden;
   resize: none;
   grid-row: 1;
   grid-column: 1;
   display: block;
-}
-
-code-input:not(.code-input_pre-element-styled) pre code, code-input.code-input_pre-element-styled pre {
-  height: max-content;
-  width: max-content;
-
 
   /* Allow colour change to reflect properly;
   transition-behavior: allow-discrete could be used but this is better supported and
   works with the color property. */
   transition: color 0.001s;
 }
+code-input textarea, code-input:not(.code-input_pre-element-styled) pre code, code-input pre { 
+  border: 0;
+
+  height: max-content;
+  width: max-content;
+}
 
 code-input:not(.code-input_pre-element-styled) pre, code-input.code-input_pre-element-styled pre code {
   /* Remove all margin and padding from others */
   margin: 0!important;
   padding: 0!important;
   border: 0!important;
+
+  min-width: 100%;
+  min-height: 100%;
 }
 
 code-input textarea, code-input pre, code-input pre * {
@@ -97,6 +99,9 @@ code-input textarea, code-input pre, code-input pre * {
   tab-size: inherit!important;
   text-align: inherit!important;
 }
+code-input textarea, code-input pre, code-input pre code {
+  overflow: visible!important;
+}
 
 /* Make changing the text direction propogate */
 code-input textarea[dir=auto] + pre {

plugins/autocomplete.css

@@ -9,7 +9,6 @@ code-input .code-input_autocomplete_popup {
     z-index: 100;
 }
 
-
-code-input .code-input_autocomplete_testpos {
-    opacity: 0;
-}
+code-input pre.code-input_autocomplete_invisiblepre {
+    opacity: 0!important;
+}

plugins/autocomplete.js

@@ -32,6 +32,7 @@ codeInput.plugins.Autocomplete = class extends codeInput.Plugin {
         codeInput.appendChild(popupElem);
 
         let testPosPre = document.createElement("pre");
+        testPosPre.classList.add("code-input_autocomplete_invisiblepre"); // Hide visually
         testPosPre.setAttribute("aria-hidden", true); // Hide for screen readers
         if(codeInput.templateObject.preElementStyled) {
             testPosPre.classList.add("code-input_autocomplete_testpos");