Skip to content

Commit c635f80

Browse files
risadamsrisadams
committed
Updating Autofill_Disable plugin to fix regression. Updated Docs
1 parent 1cf9b54 commit c635f80

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+622
-595
lines changed

‎docs/docs/API/auto_position Plugin.mdx

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
title: auto_position Plugin
3+
description: API Reference for auto_position Plugin
4+
---
5+
# API Documentation for auto_position Plugin

‎docs/docs/API/auto_select_on_type Plugin.mdx

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
title: auto_select_on_type Plugin
3+
description: API Reference for auto_select_on_type Plugin
4+
---
5+
# API Documentation for auto_select_on_type Plugin

‎docs/docs/API/autofill_disable Plugin.mdx

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
---
2+
title: autofill_disable Plugin
3+
description: API Reference for autofill_disable Plugin
4+
---
5+
# API Documentation for autofill_disable Plugin
6+
<a name="options"></a>
7+
8+
## options : <code>object</code>
9+
By default, Selectize allows the browser to autofill the control input provided by the user.
10+
This plugin disables that behavior by generating a random name and autocomplete attribute.
11+
This is a workaround for the fact that browsers do not allow disabling autofill.
12+
13+
There are several ways to disable autofill, but they all have drawbacks
14+
and are not handled the same way across all browsers:
15+
16+
- Set the attribute `autocomplete="off"`: This is the most common way to disable autofill, but it is not supported by all browsers.
17+
- 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.
18+
- Add a `readonly` attribute to the input and remove the property after the user has interacted with the control.
19+
- Set the input type to `search` or `tel`: in conjuntion with `autocomplete="off"`.
20+
- Wrap the input in a div, and add a hidden input with a tabindex of -1, and styled with 'display: none;'.
21+
- Add a duplicate hidden input with the same name, but a different id.
22+
- Use a randomizes name and autocomplete attribute.
23+
24+
**Kind**: global typedef
25+
**Author**: [Ris Adams](https://github.com/risadams)
26+
**Example**
27+
```js
28+
$('select').selectize({
29+
plugins: ['autofill_disable']
30+
});
31+
```

‎docs/docs/API/defaults.mdx

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
title: defaults
3+
description: API Reference for defaults
4+
---
5+
# API Documentation for defaults

‎docs/docs/API/drag_drop Plugin.mdx

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
title: drag_drop Plugin
3+
description: API Reference for drag_drop Plugin
4+
---
5+
# API Documentation for drag_drop Plugin

‎docs/docs/API/nanoid.mdx

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
title: nanoid
3+
description: API Reference for nanoid
4+
---
5+
# API Documentation for nanoid
6+
<a name="nanoid"></a>
7+
8+
## nanoid()
9+
nanoid v3 | MIT license | https://github.com/ai/nanoid
10+
Generates a random ID. We use this to generate unique names for the input fields so that
11+
the browser doesn't try to autofill them. This is a modified version of the original
12+
nanoid function that uses a shorter ID.
13+
14+
- Modified by Ris Adams <[email protected]> 2023-01-05 (Modified to support Selectize needs)
15+
16+
**Kind**: global function

‎docs/docs/API/read-only Plugin.mdx

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
title: read-only Plugin
3+
description: API Reference for read-only Plugin
4+
---
5+
# API Documentation for read-only Plugin

‎docs/docs/API/select_on_focus Plugin.mdx

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
title: select_on_focus Plugin
3+
description: API Reference for select_on_focus Plugin
4+
---
5+
# API Documentation for select_on_focus Plugin

‎docs/docs/API/selectize.jquery.mdx

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
title: selectize.jquery
3+
description: API Reference for selectize.jquery
4+
---
5+
# API Documentation for selectize.jquery

‎docs/docs/plugins/autofill-disable.mdx

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
id: autofill-disable
3+
title: Disable Autofill
4+
description: A plugin to disable the autofill feature of browsers.
5+
---
6+
7+
import AutoFillDisable from '@site/src/components/Examples/Plugins/AutoFillDisable';
8+
9+
<AutoFillDisable />

‎docs/docusaurus.config.js

+10-9
Original file line numberDiff line numberDiff line change
@@ -104,15 +104,16 @@ const config = {
104104
googleAdsense: {
105105
dataAdClient: 'ca-pub-9290211346209107',
106106
},
107-
algolia: {
108-
appId: 'I8ILTNUYXK',
109-
apiKey: '6680cf1dd566e9052054d892083f4db2',
110-
indexName: 'selectize',
111-
contextualSearch: true,
112-
externalUrlRegex: 'selectize\\.dev|loopback\\.website',
113-
searchParameters: {},
114-
searchPagePath: 'search',
115-
},
107+
// Enable Algolia search when API issues are resolved.
108+
// algolia: {
109+
// appId: 'I8ILTNUYXK',
110+
// apiKey: '6680cf1dd566e9052054d892083f4db2',
111+
// indexName: 'selectize',
112+
// contextualSearch: true,
113+
// externalUrlRegex: 'selectize\\.dev|loopback\\.website',
114+
// searchParameters: {},
115+
// searchPagePath: 'search',
116+
// },
116117
liveCodeBlock: {
117118
playgroundPosition: 'bottom',
118119
},

‎docs/sidebars.js

+2
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ const sidebars = {
6363
image: "/img/logo.svg"
6464
},
6565
items: [
66+
"plugins/autofill-disable",
6667
"plugins/auto-position",
6768
"plugins/auto-select-on-type",
6869
"plugins/clear-button",
@@ -97,6 +98,7 @@ const sidebars = {
9798
"API/microevent",
9899
"API/microplugin",
99100
"API/sifter",
101+
"API/autofill_disable Plugin",
100102
"API/optgroup_columns Plugin",
101103
"API/remove_button Plugin",
102104
"API/restore_on_backspace Plugin",

‎docs/src/components/Examples/Api.js

+14-20
Original file line numberDiff line numberDiff line change
@@ -57,26 +57,20 @@ export default function Api() {
5757

5858
return (
5959
<>
60-
<div
61-
style={{
62-
marginBottom: "1rem",
63-
}}
64-
>
65-
<ThemeChanger />
66-
<h4>Examples of how to interact with the control programmatically.</h4>
67-
<div className="control-group">
68-
<select id="select-tools" multiple placeholder="Pick a tool..."></select>
69-
</div>
70-
71-
<div className="pt-4">
72-
<button type="button" value="clear()" id="button-clear">clear()</button>
73-
<button type="button" value="clearOptions()" id="button-clearoptions">clearOptions()</button>
74-
<button type="button" value="addOption()" id="button-addoption">addOption()</button>
75-
<button type="button" value="addItem()" id="button-additem">addItem()</button>
76-
<button type="button" value="setValue()" id="button-setvalue">setValue()</button>
77-
<button type="button" value="maxItems(2)" id="button-maxitems2">maxItems(2)</button>
78-
<button type="button" value="maxItems(100)" id="button-maxitems100">maxItems(100)</button>
79-
</div>
60+
<ThemeChanger />
61+
<h4>Examples of how to interact with the control programmatically.</h4>
62+
<div className="control-group">
63+
<select id="select-tools" multiple placeholder="Pick a tool..."></select>
64+
</div>
65+
66+
<div className="pt-4">
67+
<button type="button" value="clear()" id="button-clear">clear()</button>
68+
<button type="button" value="clearOptions()" id="button-clearoptions">clearOptions()</button>
69+
<button type="button" value="addOption()" id="button-addoption">addOption()</button>
70+
<button type="button" value="addItem()" id="button-additem">addItem()</button>
71+
<button type="button" value="setValue()" id="button-setvalue">setValue()</button>
72+
<button type="button" value="maxItems(2)" id="button-maxitems2">maxItems(2)</button>
73+
<button type="button" value="maxItems(100)" id="button-maxitems100">maxItems(100)</button>
8074
</div>
8175

8276
<CodeBlock className="language-html" title="Html">

‎docs/src/components/Examples/Basic.js

+12-18
Original file line numberDiff line numberDiff line change
@@ -10,24 +10,18 @@ export default function Basics() {
1010

1111
return (
1212
<>
13-
<div
14-
style={{
15-
marginBottom: "1rem",
16-
}}
17-
>
18-
<ThemeChanger />
19-
<h4>The most vanilla of examples.</h4>
20-
<select id="normalize">
21-
<option value=""></option>
22-
<option value="1">Awesome</option>
23-
<option value="2">Beast</option>
24-
<option value="3">Compatible</option>
25-
<option value="4">Thomas Edison</option>
26-
<option value="5">Nikola</option>
27-
<option value="6">Selectize</option>
28-
<option value="7">Javascript</option>
29-
</select>
30-
</div>
13+
<ThemeChanger />
14+
<h4>The most vanilla of examples.</h4>
15+
<select id="normalize">
16+
<option value=""></option>
17+
<option value="1">Awesome</option>
18+
<option value="2">Beast</option>
19+
<option value="3">Compatible</option>
20+
<option value="4">Thomas Edison</option>
21+
<option value="5">Nikola</option>
22+
<option value="6">Selectize</option>
23+
<option value="7">Javascript</option>
24+
</select>
3125

3226
<CodeBlock className="language-html" title="Html">
3327
{`<select id="normalize">

‎docs/src/components/Examples/ConfirmDelete.js

+5-11
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,11 @@ export default function ConfirmDelete() {
1616

1717
return (
1818
<>
19-
<div
20-
style={{
21-
marginBottom: "1rem",
22-
}}
23-
>
24-
<ThemeChanger />
25-
<h4>Using the Confirm Delete dialog</h4>
26-
<div className="control-group">
27-
<label htmlFor="input-tags">Tags:</label>
28-
<input type="text" id="input-tags" className="demo-default" defaultValue="awesome,neat,yeah" />
29-
</div>
19+
<ThemeChanger />
20+
<h4>Using the Confirm Delete dialog</h4>
21+
<div className="control-group">
22+
<label htmlFor="input-tags">Tags:</label>
23+
<input type="text" id="input-tags" className="demo-default" defaultValue="awesome,neat,yeah" />
3024
</div>
3125

3226
<CodeBlock className="language-html" title="Html">

‎docs/src/components/Examples/Diacritics.js

+9-15
Original file line numberDiff line numberDiff line change
@@ -19,22 +19,16 @@ export default function Diacritics() {
1919

2020
return (
2121
<div>
22-
<div
23-
style={{
24-
marginBottom: "1rem",
25-
}}
26-
>
27-
<ThemeChanger />
28-
<h4 style={{ textAlign: "left", marginBottom: "4rem" }}>
29-
Selectize can handle diacritics. Try typing "côte d'ivoire" or "são
30-
</h4>
22+
<ThemeChanger />
23+
<h4>
24+
Selectize can handle diacritics. Try typing "côte d'ivoire" or "são
25+
</h4>
3126

32-
<select id='diacritics'>
33-
<option>Åland Islands</option>
34-
<option>Helô</option>
35-
<option>déjà vu</option>
36-
</select>
37-
</div>
27+
<select id='diacritics'>
28+
<option>Åland Islands</option>
29+
<option>Helô</option>
30+
<option>déjà vu</option>
31+
</select>
3832

3933
<CodeBlock className="language-html" title="Html">
4034
{`<select id='diacritics'>

‎docs/src/components/Examples/DynamicOpt.js

+4-10
Original file line numberDiff line numberDiff line change
@@ -21,16 +21,10 @@ export default function DynamicOpt() {
2121

2222
return (
2323
<>
24-
<div
25-
style={{
26-
marginBottom: "1rem",
27-
}}
28-
>
29-
<ThemeChanger />
30-
<h4>Using Dynamic Options.</h4>
31-
<p>The options are created straight from an array.</p>
32-
<select id="select-tools" placeholder="Pick a tool..."></select>
33-
</div>
24+
<ThemeChanger />
25+
<h4>Using Dynamic Options.</h4>
26+
<p>The options are created straight from an array.</p>
27+
<select id="select-tools" placeholder="Pick a tool..."></select>
3428

3529
<CodeBlock className="language-html" title="Html">
3630
{`<select id="select-tools" placeholder="Pick a tool..."></select>`}

‎docs/src/components/Examples/DynamicOptGroups.js

+7-13
Original file line numberDiff line numberDiff line change
@@ -43,19 +43,13 @@ export default function OptGroups() {
4343

4444
return (
4545
<div>
46-
<div
47-
style={{
48-
marginBottom: "1rem",
49-
}}
50-
>
51-
<ThemeChanger />
52-
<h4 style={{ textAlign: "left", marginBottom: "4rem" }}>
53-
Selectize provides the ability to group options together within the dropdown menu.
54-
</h4>
55-
<div className="control-group">
56-
<label htmlFor="select-console">Console:</label>
57-
<select id="select-console" className="demo-consoles" placeholder="Select console..."></select>
58-
</div>
46+
<ThemeChanger />
47+
<h4>
48+
Selectize provides the ability to group options together within the dropdown menu.
49+
</h4>
50+
<div className="control-group">
51+
<label htmlFor="select-console">Console:</label>
52+
<select id="select-console" className="demo-consoles" placeholder="Select console..."></select>
5953
</div>
6054

6155
<CodeBlock className="language-html" title="Html">

‎docs/src/components/Examples/EmailContact.js

+6-12
Original file line numberDiff line numberDiff line change
@@ -87,22 +87,16 @@ export default function EmailContact() {
8787
return (
8888
<div>
8989
<ThemeChanger />
90-
<h4 style={{ textAlign: "left", marginBottom: "4rem" }}>
90+
<h4>
9191
This demonstrates two main things: (1) custom item and option rendering,
9292
and (2) item creation on-the-fly. Try typing a valid and invalid email
9393
address.
9494
</h4>
95-
<div
96-
style={{
97-
marginBottom: "1rem",
98-
}}
99-
>
100-
<select
101-
id="select-to"
102-
className="contacts"
103-
placeholder="Pick some people..."
104-
></select>
105-
</div>
95+
<select
96+
id="select-to"
97+
className="contacts"
98+
placeholder="Pick some people..."
99+
></select>
106100

107101
<CodeBlock className="language-html" title="Html">
108102
{`<select id="select-to" class="contacts" placeholder="Pick some people..."></select>`}

0 commit comments

Comments
 (0)