added a div wrapper to prevent this bug: https://stackoverflow.com/q/…

…34354085/104380

docs/examples/dist/RTL.html

@@ -80,9 +80,11 @@
     min-width: 300px;
 }
         </style>
+        <div>
         <div dir='rtl'>
     <input name='rtl-example' class='tagify--rtl-exmaple' placeholder='לחץ בשדה והוסף ערך'/>
 </div>
+        </div>
         <script>
         // The DOM element you wish to replace with Tagify
 var input = document.querySelector('input[name=rtl-example]');

docs/examples/dist/advance-options.html

@@ -65,7 +65,9 @@
     --tag-hover: var(--tag-bg);
 }
         </style>
+        <div>
         <input class='advance-options' value='[{"value":"point"}, {"value":"soft"}]' pattern='^[A-Za-z_✲ ]{1,15}$'>
+        </div>
         <script>
         var input = document.querySelector('input.advance-options'),
     tagify = new Tagify(input, {

docs/examples/dist/basic.html

@@ -63,7 +63,9 @@
         <style>
 
         </style>
+        <div>
         <input name='basic' value='tag1, tag2' autofocus>
+        </div>
         <script>
         // The DOM element you wish to replace with Tagify
 var input = document.querySelector('input[name=basic]');

docs/examples/dist/different-look.html

@@ -133,7 +133,9 @@
     display: none;
 }
         </style>
+        <div>
         <input class='customLook' value='[email protected]'><button type="button">+</button>
+        </div>
         <script>
         // generate random whilist items (for the demo)
 var randomStringsArr = Array.apply(null, Array(100)).map(function () {

docs/examples/dist/disabled-user-input.html

@@ -63,7 +63,9 @@
         <style>
 
         </style>
+        <div>
         <input name='disabled-user-input' placeholder='Select tags from the list'>
+        </div>
         <script>
         var input = document.querySelector('input[name=disabled-user-input]'),
     tagify = new Tagify(input, {

docs/examples/dist/disabled.html

@@ -63,7 +63,9 @@
         <style>
 
         </style>
+        <div>
         <input disabled value='tag1, tag 2, another tag'>
+        </div>
         <script>
         var input = document.querySelector('input[disabled]'),
     tagify = new Tagify(input);

docs/examples/dist/drag-sort.html

@@ -63,7 +63,9 @@
         <style>
 
         </style>
+        <div>
         <input name='drag-sort' value='tag 1, tag 2, tag 3, tag 4, tag 5, tag 6'/>
+        </div>
         <script>
         var input = document.querySelector('input[name=drag-sort]'),
     tagify = new Tagify(input);

docs/examples/dist/extra-properties.html

@@ -88,7 +88,9 @@
     pointer-events: none;
 }
         </style>
+        <div>
         <input class='countries' name='extra-properties' placeholder="Try adding tags from the list">
+        </div>
         <script>
         var tagify = new Tagify(document.querySelector('input[name=extra-properties]'), {
     delimiters: null,

docs/examples/dist/input-suggestions-styled-as-tags.html

@@ -93,7 +93,9 @@
     border: 0;
 }
         </style>
+        <div>
         <input name='input-custom-dropdown' class='tagify--custom-dropdown' placeholder='Type an English letter' value='css, html, javascript'>
+        </div>
         <script>
         var input = document.querySelector('input[name="input-custom-dropdown"]'),
     // init Tagify script on the above inputs

docs/examples/dist/input.html

@@ -63,10 +63,12 @@
         <style>
 
         </style>
+        <div>
         <!-- https://codepen.io/vsync/pen/PoNqYVY -->
 <input name='input' class='some_class_name' placeholder='Type an English letter' value='css, html, javascript, css' data-blacklist='.NET, PHP'>
 <br/>
 <button class='tags--removeAllBtn' type='button'>Remove all these tags ⬆</button>
+        </div>
         <script>
         var inputElm = document.querySelector('input[name=input]'),
     whitelist = ["A# .NET", "A# (Axiom)", "A-0 System", "A+", "A++", "ABAP", "ABC", "ABC ALGOL", "ABSET", "ABSYS", "ACC", "Accent", "Ace DASL", "ACL2", "Avicsoft", "ACT-III", "Action!", "ActionScript", "Ada", "Adenine", "Agda", "Agilent VEE", "Agora", "AIMMS", "Alef", "ALF", "ALGOL 58", "ALGOL 60", "ALGOL 68", "ALGOL W", "Alice", "Alma-0", "AmbientTalk", "Amiga E", "AMOS", "AMPL", "Apex (Salesforce.com)", "APL", "AppleScript", "Arc", "ARexx", "Argus", "AspectJ", "Assembly language", "ATS", "Ateji PX", "AutoHotkey", "Autocoder", "AutoIt", "AutoLISP / Visual LISP", "Averest", "AWK", "Axum", "Active Server Pages", "ASP.NET", "B", "Babbage", "Bash", "BASIC", "bc", "BCPL", "BeanShell", "Batch (Windows/Dos)", "Bertrand", "BETA", "Bigwig", "Bistro", "BitC", "BLISS", "Blockly", "BlooP", "Blue", "Boo", "Boomerang", "Bourne shell (including bash and ksh)", "BREW", "BPEL", "B", "C--", "C++ – ISO/IEC 14882", "C# – ISO/IEC 23270", "C/AL", "Caché ObjectScript", "C Shell", "Caml", "Cayenne", "CDuce", "Cecil", "Cesil", "Céu", "Ceylon", "CFEngine", "CFML", "Cg", "Ch", "Chapel", "Charity", "Charm", "Chef", "CHILL", "CHIP-8", "chomski", "ChucK", "CICS", "Cilk", "Citrine (programming language)", "CL (IBM)", "Claire", "Clarion", "Clean", "Clipper", "CLIPS", "CLIST", "Clojure", "CLU", "CMS-2", "COBOL – ISO/IEC 1989", "CobolScript – COBOL Scripting language", "Cobra", "CODE", "CoffeeScript", "ColdFusion", "COMAL", "Combined Programming Language (CPL)", "COMIT", "Common Intermediate Language (CIL)", "Common Lisp (also known as CL)", "COMPASS", "Component Pascal", "Constraint Handling Rules (CHR)", "COMTRAN", "Converge", "Cool", "Coq", "Coral 66", "Corn", "CorVision", "COWSEL", "CPL", "CPL", "Cryptol", "csh", "Csound", "CSP", "CUDA", "Curl", "Curry", "Cybil", "Cyclone", "Cython", "Java", "Javascript", "M2001", "M4", "M#", "Machine code", "MAD (Michigan Algorithm Decoder)", "MAD/I", "Magik", "Magma", "make", "Maple", "MAPPER now part of BIS", "MARK-IV now VISION:BUILDER", "Mary", "MASM Microsoft Assembly x86", "MATH-MATIC", "Mathematica", "MATLAB", "Maxima (see also Macsyma)", "Max (Max Msp – Graphical Programming Environment)", "Maya (MEL)", "MDL", "Mercury", "Mesa", "Metafont", "Microcode", "MicroScript", "MIIS", "Milk (programming language)", "MIMIC", "Mirah", "Miranda", "MIVA Script", "ML", "Model 204", "Modelica", "Modula", "Modula-2", "Modula-3", "Mohol", "MOO", "Mortran", "Mouse", "MPD", "Mathcad", "MSIL – deprecated name for CIL", "MSL", "MUMPS", "Mystic Programming L"];

docs/examples/dist/manual-suggestions.html

@@ -75,8 +75,10 @@
     padding: 1em;
   }
         </style>
+        <div>
         <input name='tags-manual-suggestions' placeholder='write some tags'>
 <h3>☝ Add items from below list:</h3>
+        </div>
         <script>
         var input = document.querySelector('input[name=tags-manual-suggestions]'),
     // init Tagify script on the above inputs

docs/examples/dist/mix.html

@@ -63,7 +63,9 @@
         <style>
 
         </style>
+        <div>
         <textarea name='mix'>[[{"id":101, "value":"cartman", "title":"Eric Cartman"}]] and [[kyle]] do not know [[{"value":"homer simpson", "readonly":true}]] because he's a relic.</textarea>
+        </div>
         <script>
         // Define two types of whitelists, each used for the dropdown suggestions menu,
 // depending on the prefix pattern typed (@/#). See settings below.

docs/examples/dist/mode-select.html

@@ -63,7 +63,9 @@
         <style>
 
         </style>
+        <div>
         <input name='mode-select' placeholder="Please select" />
+        </div>
         <script>
         var input = document.querySelector('input[name=mode-select]'),
     tagify = new Tagify(input, {

docs/examples/dist/outside-of-the-box.html

@@ -82,7 +82,9 @@
     border-color: var(--tags-focus-border-color);
 }
         </style>
+        <div>
         <input name='tags-outside' class='tagify--outside' value='tag1, tag2, tag3' placeholder='write tags to add below'>
+        </div>
         <script>
         var input = document.querySelector('input[name=tags-outside]')
 

docs/examples/dist/readonly-mixed.html

@@ -63,6 +63,7 @@
         <style>
 
         </style>
+        <div>
         <input
     name='readonly-mix'
     placeholder='Type something'
@@ -82,6 +83,7 @@
         }
     ]'
 />
+        </div>
         <script>
         var input = document.querySelector('input[name=readonly-mix]'),
     tagify = new Tagify(input)

docs/examples/dist/readonly.html

@@ -63,7 +63,9 @@
         <style>
 
         </style>
+        <div>
         <input readonly value='tag1, tag 2, another tag'>
+        </div>
         <script>
         var input = document.querySelector('input[readonly]'),
     tagify = new Tagify(input);

docs/examples/dist/textarea.html

@@ -63,7 +63,9 @@
         <style>
 
         </style>
+        <div>
         <textarea name='tags2' placeholder='Movie names'> [{"value":"The Good, the Bad and the Ugly"}, {"value":"The Matrix"}]</textarea>
+        </div>
         <script>
         var input = document.querySelector('textarea[name=tags2]'),
     tagify = new Tagify(input, {

docs/examples/dist/users-list.html

@@ -179,7 +179,9 @@
     border-top: 1px solid #DDD;
 }
         </style>
+        <div>
         <input name='users-list-tags' class='users-list' value='[email protected], Justinian Hattersley'>
+        </div>
         <script>
         var inputElm = document.querySelector('input[name=users-list-tags]');
 

docs/examples/src/example-template.html

@@ -63,7 +63,9 @@
         <style>
         <!-- include:css -->
         </style>
+        <div>
         <!-- include:html -->
+        </div>
         <script>
         <!-- include:js -->
         </script>