Updating Autofill_Disable plugin to fix regression. Updated Docs

selectize · Jan 5, 2023 · c635f80 · c635f80
1 parent 1cf9b54
commit c635f80
Show file tree

Hide file tree

Showing 52 changed files with 622 additions and 595 deletions.
diff --git a/docs/docs/API/auto_position Plugin.mdx b/docs/docs/API/auto_position Plugin.mdx
@@ -0,0 +1,5 @@
+---
+title: auto_position Plugin
+description: API Reference for auto_position Plugin
+---
+# API Documentation for auto_position Plugin
diff --git a/docs/docs/API/auto_select_on_type Plugin.mdx b/docs/docs/API/auto_select_on_type Plugin.mdx
@@ -0,0 +1,5 @@
+---
+title: auto_select_on_type Plugin
+description: API Reference for auto_select_on_type Plugin
+---
+# API Documentation for auto_select_on_type Plugin
diff --git a/docs/docs/API/autofill_disable Plugin.mdx b/docs/docs/API/autofill_disable Plugin.mdx
@@ -0,0 +1,31 @@
+---
+title: autofill_disable Plugin
+description: API Reference for autofill_disable Plugin
+---
+# API Documentation for autofill_disable Plugin
+<a name="options"></a>
+
+## options : <code>object</code>
+By default, Selectize allows the browser to autofill the control input provided by the user.
+This plugin disables that behavior by generating a random name and autocomplete attribute.
+This is a workaround for the fact that browsers do not allow disabling autofill.
+
+There are several ways to disable autofill, but they all have drawbacks
+and are not handled the same way across all browsers:
+
+- Set the attribute `autocomplete="off"`: This is the most common way to disable autofill, but it is not supported by all browsers.
+- Set the attribute `autocomplete="new-password"`: This is the most common way to disable autofill in modern browsers, but it is not supported by all browsers.
+- Add a `readonly` attribute to the input and remove the property after the user has interacted with the control.
+- Set the input type to `search` or `tel`: in conjuntion with `autocomplete="off"`.
+- Wrap the input in a div, and add a hidden input with a tabindex of -1, and styled with 'display: none;'.
+- Add a duplicate hidden input with the same name, but a different id.
+- Use a randomizes name and autocomplete attribute.
+
+**Kind**: global typedef  
+**Author**: [Ris Adams](https://github.com/risadams)  
+**Example**  
+```js
+$('select').selectize({
+ plugins: ['autofill_disable']
+});
+```
diff --git a/docs/docs/API/defaults.mdx b/docs/docs/API/defaults.mdx
@@ -0,0 +1,5 @@
+---
+title: defaults
+description: API Reference for defaults
+---
+# API Documentation for defaults
diff --git a/docs/docs/API/drag_drop Plugin.mdx b/docs/docs/API/drag_drop Plugin.mdx
@@ -0,0 +1,5 @@
+---
+title: drag_drop Plugin
+description: API Reference for drag_drop Plugin
+---
+# API Documentation for drag_drop Plugin
diff --git a/docs/docs/API/nanoid.mdx b/docs/docs/API/nanoid.mdx
@@ -0,0 +1,16 @@
+---
+title: nanoid
+description: API Reference for nanoid
+---
+# API Documentation for nanoid
+<a name="nanoid"></a>
+
+## nanoid()
+nanoid v3 | MIT license | https://github.com/ai/nanoid
+Generates a random ID. We use this to generate unique names for the input fields so that
+the browser doesn't try to autofill them. This is a modified version of the original
+nanoid function that uses a shorter ID.
+
+- Modified by Ris Adams <[email protected]> 2023-01-05 (Modified to support Selectize needs)
+
+**Kind**: global function  
diff --git a/docs/docs/API/read-only Plugin.mdx b/docs/docs/API/read-only Plugin.mdx
@@ -0,0 +1,5 @@
+---
+title: read-only Plugin
+description: API Reference for read-only Plugin
+---
+# API Documentation for read-only Plugin
diff --git a/docs/docs/API/select_on_focus Plugin.mdx b/docs/docs/API/select_on_focus Plugin.mdx
@@ -0,0 +1,5 @@
+---
+title: select_on_focus Plugin
+description: API Reference for select_on_focus Plugin
+---
+# API Documentation for select_on_focus Plugin
diff --git a/docs/docs/API/selectize.jquery.mdx b/docs/docs/API/selectize.jquery.mdx
@@ -0,0 +1,5 @@
+---
+title: selectize.jquery
+description: API Reference for selectize.jquery
+---
+# API Documentation for selectize.jquery
diff --git a/docs/docs/plugins/autofill-disable.mdx b/docs/docs/plugins/autofill-disable.mdx
@@ -0,0 +1,9 @@
+---
+id: autofill-disable
+title: Disable Autofill
+description: A plugin to disable the autofill feature of browsers.
+---
+
+import AutoFillDisable from '@site/src/components/Examples/Plugins/AutoFillDisable';
+
+<AutoFillDisable />
diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
@@ -104,15 +104,16 @@ const config = {
       googleAdsense: {
         dataAdClient: 'ca-pub-9290211346209107',
       },
-      algolia: {
-        appId: 'I8ILTNUYXK',
-        apiKey: '6680cf1dd566e9052054d892083f4db2',
-        indexName: 'selectize',
-        contextualSearch: true,
-        externalUrlRegex: 'selectize\\.dev|loopback\\.website',
-        searchParameters: {},
-        searchPagePath: 'search',
-      },
+      // Enable Algolia search when API issues are resolved.
+      // algolia: {
+      //   appId: 'I8ILTNUYXK',
+      //   apiKey: '6680cf1dd566e9052054d892083f4db2',
+      //   indexName: 'selectize',
+      //   contextualSearch: true,
+      //   externalUrlRegex: 'selectize\\.dev|loopback\\.website',
+      //   searchParameters: {},
+      //   searchPagePath: 'search',
+      // },
       liveCodeBlock: {
         playgroundPosition: 'bottom',
       },

diff --git a/docs/sidebars.js b/docs/sidebars.js
@@ -63,6 +63,7 @@ const sidebars = {
         image: "/img/logo.svg"
       },
       items: [
+        "plugins/autofill-disable",
         "plugins/auto-position",
         "plugins/auto-select-on-type",
         "plugins/clear-button",
@@ -97,6 +98,7 @@ const sidebars = {
         "API/microevent",
         "API/microplugin",
         "API/sifter",
+        "API/autofill_disable Plugin",
         "API/optgroup_columns Plugin",
         "API/remove_button Plugin",
         "API/restore_on_backspace Plugin",

diff --git a/docs/src/components/Examples/Api.js b/docs/src/components/Examples/Api.js
@@ -57,26 +57,20 @@ export default function Api() {
 
   return (
     <>
-      <div
-        style={{
-          marginBottom: "1rem",
-        }}
-      >
-        <ThemeChanger />
-        <h4>Examples of how to interact with the control programmatically.</h4>
-        <div className="control-group">
-          <select id="select-tools" multiple placeholder="Pick a tool..."></select>
-        </div>
-
-        <div className="pt-4">
-          <button type="button" value="clear()" id="button-clear">clear()</button>
-          <button type="button" value="clearOptions()" id="button-clearoptions">clearOptions()</button>
-          <button type="button" value="addOption()" id="button-addoption">addOption()</button>
-          <button type="button" value="addItem()" id="button-additem">addItem()</button>
-          <button type="button" value="setValue()" id="button-setvalue">setValue()</button>
-          <button type="button" value="maxItems(2)" id="button-maxitems2">maxItems(2)</button>
-          <button type="button" value="maxItems(100)" id="button-maxitems100">maxItems(100)</button>
-        </div>
+      <ThemeChanger />
+      <h4>Examples of how to interact with the control programmatically.</h4>
+      <div className="control-group">
+        <select id="select-tools" multiple placeholder="Pick a tool..."></select>
+      </div>
+
+      <div className="pt-4">
+        <button type="button" value="clear()" id="button-clear">clear()</button>
+        <button type="button" value="clearOptions()" id="button-clearoptions">clearOptions()</button>
+        <button type="button" value="addOption()" id="button-addoption">addOption()</button>
+        <button type="button" value="addItem()" id="button-additem">addItem()</button>
+        <button type="button" value="setValue()" id="button-setvalue">setValue()</button>
+        <button type="button" value="maxItems(2)" id="button-maxitems2">maxItems(2)</button>
+        <button type="button" value="maxItems(100)" id="button-maxitems100">maxItems(100)</button>
       </div>
 
       <CodeBlock className="language-html" title="Html">

diff --git a/docs/src/components/Examples/Basic.js b/docs/src/components/Examples/Basic.js
@@ -10,24 +10,18 @@ export default function Basics() {
 
   return (
     <>
-      <div
-        style={{
-          marginBottom: "1rem",
-        }}
-      >
-        <ThemeChanger />
-        <h4>The most vanilla of examples.</h4>
-        <select id="normalize">
-          <option value=""></option>
-          <option value="1">Awesome</option>
-          <option value="2">Beast</option>
-          <option value="3">Compatible</option>
-          <option value="4">Thomas Edison</option>
-          <option value="5">Nikola</option>
-          <option value="6">Selectize</option>
-          <option value="7">Javascript</option>
-        </select>
-      </div>
+      <ThemeChanger />
+      <h4>The most vanilla of examples.</h4>
+      <select id="normalize">
+        <option value=""></option>
+        <option value="1">Awesome</option>
+        <option value="2">Beast</option>
+        <option value="3">Compatible</option>
+        <option value="4">Thomas Edison</option>
+        <option value="5">Nikola</option>
+        <option value="6">Selectize</option>
+        <option value="7">Javascript</option>
+      </select>
 
       <CodeBlock className="language-html" title="Html">
         {`<select id="normalize">

diff --git a/docs/src/components/Examples/ConfirmDelete.js b/docs/src/components/Examples/ConfirmDelete.js
@@ -16,17 +16,11 @@ export default function ConfirmDelete() {
 
   return (
     <>
-      <div
-        style={{
-          marginBottom: "1rem",
-        }}
-      >
-        <ThemeChanger />
-        <h4>Using the Confirm Delete dialog</h4>
-        <div className="control-group">
-          <label htmlFor="input-tags">Tags:</label>
-          <input type="text" id="input-tags" className="demo-default" defaultValue="awesome,neat,yeah" />
-        </div>
+      <ThemeChanger />
+      <h4>Using the Confirm Delete dialog</h4>
+      <div className="control-group">
+        <label htmlFor="input-tags">Tags:</label>
+        <input type="text" id="input-tags" className="demo-default" defaultValue="awesome,neat,yeah" />
       </div>
 
       <CodeBlock className="language-html" title="Html">

diff --git a/docs/src/components/Examples/Diacritics.js b/docs/src/components/Examples/Diacritics.js
@@ -19,22 +19,16 @@ export default function Diacritics() {
 
   return (
     <div>
-      <div
-        style={{
-          marginBottom: "1rem",
-        }}
-      >
-        <ThemeChanger />
-        <h4 style={{ textAlign: "left", marginBottom: "4rem" }}>
-          Selectize can handle diacritics. Try typing "côte d'ivoire" or "são
-        </h4>
+      <ThemeChanger />
+      <h4>
+        Selectize can handle diacritics. Try typing "côte d'ivoire" or "são
+      </h4>
 
-        <select id='diacritics'>
-          <option>Åland Islands</option>
-          <option>Helô</option>
-          <option>déjà vu</option>
-        </select>
-      </div>
+      <select id='diacritics'>
+        <option>Åland Islands</option>
+        <option>Helô</option>
+        <option>déjà vu</option>
+      </select>
 
       <CodeBlock className="language-html" title="Html">
         {`<select id='diacritics'>

diff --git a/docs/src/components/Examples/DynamicOpt.js b/docs/src/components/Examples/DynamicOpt.js
@@ -21,16 +21,10 @@ export default function DynamicOpt() {
 
   return (
     <>
-      <div
-        style={{
-          marginBottom: "1rem",
-        }}
-      >
-        <ThemeChanger />
-        <h4>Using Dynamic Options.</h4>
-        <p>The options are created straight from an array.</p>
-        <select id="select-tools" placeholder="Pick a tool..."></select>
-      </div>
+      <ThemeChanger />
+      <h4>Using Dynamic Options.</h4>
+      <p>The options are created straight from an array.</p>
+      <select id="select-tools" placeholder="Pick a tool..."></select>
 
       <CodeBlock className="language-html" title="Html">
         {`<select id="select-tools" placeholder="Pick a tool..."></select>`}

diff --git a/docs/src/components/Examples/DynamicOptGroups.js b/docs/src/components/Examples/DynamicOptGroups.js
@@ -43,19 +43,13 @@ export default function OptGroups() {
 
   return (
     <div>
-      <div
-        style={{
-          marginBottom: "1rem",
-        }}
-      >
-        <ThemeChanger />
-        <h4 style={{ textAlign: "left", marginBottom: "4rem" }}>
-          Selectize provides the ability to group options together within the dropdown menu.
-        </h4>
-        <div className="control-group">
-          <label htmlFor="select-console">Console:</label>
-          <select id="select-console" className="demo-consoles" placeholder="Select console..."></select>
-        </div>
+      <ThemeChanger />
+      <h4>
+        Selectize provides the ability to group options together within the dropdown menu.
+      </h4>
+      <div className="control-group">
+        <label htmlFor="select-console">Console:</label>
+        <select id="select-console" className="demo-consoles" placeholder="Select console..."></select>
       </div>
 
       <CodeBlock className="language-html" title="Html">

diff --git a/docs/src/components/Examples/EmailContact.js b/docs/src/components/Examples/EmailContact.js
@@ -87,22 +87,16 @@ export default function EmailContact() {
   return (
     <div>
       <ThemeChanger />
-      <h4 style={{ textAlign: "left", marginBottom: "4rem" }}>
+      <h4>
         This demonstrates two main things: (1) custom item and option rendering,
         and (2) item creation on-the-fly. Try typing a valid and invalid email
         address.
       </h4>
-      <div
-        style={{
-          marginBottom: "1rem",
-        }}
-      >
-        <select
-          id="select-to"
-          className="contacts"
-          placeholder="Pick some people..."
-        ></select>
-      </div>
+      <select
+        id="select-to"
+        className="contacts"
+        placeholder="Pick some people..."
+      ></select>
 
       <CodeBlock className="language-html" title="Html">
         {`<select id="select-to" class="contacts" placeholder="Pick some people..."></select>`}