From dbaf95b42ce7544d5a2b4ec806201e2d62f1f8e4 Mon Sep 17 00:00:00 2001 From: Tiago Sa Date: Tue, 12 Dec 2017 17:48:49 +0000 Subject: [PATCH 1/4] Close dropdown if not hover --- src/ReactSelectize.ls | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/ReactSelectize.ls b/src/ReactSelectize.ls index 77a5936..eb42c90 100644 --- a/src/ReactSelectize.ls +++ b/src/ReactSelectize.ls @@ -185,7 +185,12 @@ module.exports = class ReactSelectize extends React.Component on-blur: (e) ~> # to prevent closing the dropdown when the user tries to click & drag the scrollbar in IE - return if @refs.dropdown-menu and document.active-element == (find-DOM-node @refs.dropdown-menu) + dropDownClassName = findDOMNode(this$.refs.dropdownMenu).classList[0] + + if @refs.dropdownMenu && document.activeElement.isEqualNode(findDOMNode(@refs.dropdownMenu)) + return + else if (!!document.querySelector('.'+dropDownClassName+':hover')) + return @refs.search.focus() <~ @close-dropdown @@ -529,4 +534,4 @@ module.exports = class ReactSelectize extends React.Component true # uid-to-string :: () -> String, only used for the key prop (required by react render), & for refs - uid-to-string: (uid) -> (if typeof uid == \object then JSON.stringify else id) uid \ No newline at end of file + uid-to-string: (uid) -> (if typeof uid == \object then JSON.stringify else id) uid From 8cb55b7a8fe9c8df66a842775fd9fd5c6c132ed7 Mon Sep 17 00:00:00 2001 From: Tiago Sa Date: Tue, 12 Dec 2017 17:50:03 +0000 Subject: [PATCH 2/4] Close if dropdown is not hover --- src/ReactSelectize.ls | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ReactSelectize.ls b/src/ReactSelectize.ls index eb42c90..6d7eec6 100644 --- a/src/ReactSelectize.ls +++ b/src/ReactSelectize.ls @@ -189,7 +189,7 @@ module.exports = class ReactSelectize extends React.Component if @refs.dropdownMenu && document.activeElement.isEqualNode(findDOMNode(@refs.dropdownMenu)) return - else if (!!document.querySelector('.'+dropDownClassName+':hover')) + else if (!!document.querySelector(`.${dropDownClassName}:hover`)) return @refs.search.focus() <~ @close-dropdown From 4e186094a16fe32d8e8978d84d85f47411487cb9 Mon Sep 17 00:00:00 2001 From: Tiago Sa Date: Tue, 12 Dec 2017 18:01:33 +0000 Subject: [PATCH 3/4] Livescript and not ES6 --- src/ReactSelectize.ls | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ReactSelectize.ls b/src/ReactSelectize.ls index 6d7eec6..5ca042d 100644 --- a/src/ReactSelectize.ls +++ b/src/ReactSelectize.ls @@ -189,7 +189,7 @@ module.exports = class ReactSelectize extends React.Component if @refs.dropdownMenu && document.activeElement.isEqualNode(findDOMNode(@refs.dropdownMenu)) return - else if (!!document.querySelector(`.${dropDownClassName}:hover`)) + else if (!!document.querySelector(".#{dropDownClassName}:hover")) return @refs.search.focus() <~ @close-dropdown From 195606f9379588a9086dc2af28f4fe9644e2f47f Mon Sep 17 00:00:00 2001 From: Adrian Soucup Date: Wed, 3 Jan 2018 13:19:30 +0200 Subject: [PATCH 4/4] Fixes the IE11 invalid pointer exception Signed-off-by: Tiago Sa --- package-lock.json | 437 +++++++++--------------------------------- src/ReactSelectize.ls | 149 +++++++------- 2 files changed, 168 insertions(+), 418 deletions(-) diff --git a/package-lock.json b/package-lock.json index fb2400a..c562e6f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "react-selectize", - "version": "3.0.0", + "version": "3.0.1", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -10,6 +10,45 @@ "integrity": "sha512-6qLZpfQFO/g5Ns2e7RsW6brk0Q6Xzwiw7kVVU/XiQNOiJXSojhX76GP457PBYIsNMH2WfcGgcnZB4awFDHrwpA==", "dev": true }, + "LiveScript": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/LiveScript/-/LiveScript-1.3.1.tgz", + "integrity": "sha1-kBlsSFP+SaPGGCsF5PK69ZjmhW8=", + "dev": true, + "requires": { + "optionator": "0.8.2", + "prelude-ls": "1.1.2", + "source-map": "0.5.6" + }, + "dependencies": { + "optionator": { + "version": "0.8.2", + "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.2.tgz", + "integrity": "sha1-NkxeQJ0/TWMB1sC0wFu6UBgK62Q=", + "dev": true, + "requires": { + "deep-is": "0.1.3", + "fast-levenshtein": "2.0.6", + "levn": "0.3.0", + "prelude-ls": "1.1.2", + "type-check": "0.3.2", + "wordwrap": "1.0.0" + } + }, + "source-map": { + "version": "0.5.6", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz", + "integrity": "sha1-dc449SvwczxafwwRjYEzSiu19BI=", + "dev": true + }, + "wordwrap": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz", + "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=", + "dev": true + } + } + }, "abab": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/abab/-/abab-1.0.3.tgz", @@ -530,6 +569,7 @@ "integrity": "sha1-CJo0Y69Y0OSNjNQHCz90ZU1avKk=", "dev": true, "requires": { + "JSONStream": "1.3.1", "assert": "1.4.1", "browser-pack": "6.0.2", "browser-resolve": "1.11.2", @@ -551,7 +591,6 @@ "https-browserify": "1.0.0", "inherits": "2.0.3", "insert-module-globals": "7.0.1", - "JSONStream": "1.3.1", "labeled-stream-splicer": "2.0.0", "module-deps": "4.1.1", "os-browserify": "0.1.2", @@ -579,6 +618,16 @@ "xtend": "4.0.1" }, "dependencies": { + "JSONStream": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.1.tgz", + "integrity": "sha1-cH92HgHa6eFvG8+TcDt4xwlmV5o=", + "dev": true, + "requires": { + "jsonparse": "1.3.1", + "through": "2.3.8" + } + }, "assert": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/assert/-/assert-1.4.1.tgz", @@ -600,9 +649,9 @@ "integrity": "sha1-+GzWzvT1MAyOY+B6TVEvZfv/RTE=", "dev": true, "requires": { + "JSONStream": "1.3.1", "combine-source-map": "0.7.2", "defined": "1.0.0", - "JSONStream": "1.3.1", "through2": "2.0.3", "umd": "3.0.1" } @@ -742,26 +791,16 @@ "integrity": "sha1-wDv04BywhtW15azorQr+eInWOMM=", "dev": true, "requires": { + "JSONStream": "1.3.1", "combine-source-map": "0.7.2", "concat-stream": "1.5.2", "is-buffer": "1.1.5", - "JSONStream": "1.3.1", "lexical-scope": "1.2.0", "process": "0.11.10", "through2": "2.0.3", "xtend": "4.0.1" } }, - "JSONStream": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/JSONStream/-/JSONStream-1.3.1.tgz", - "integrity": "sha1-cH92HgHa6eFvG8+TcDt4xwlmV5o=", - "dev": true, - "requires": { - "jsonparse": "1.3.1", - "through": "2.3.8" - } - }, "labeled-stream-splicer": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/labeled-stream-splicer/-/labeled-stream-splicer-2.0.0.tgz", @@ -796,6 +835,7 @@ "integrity": "sha1-IyFYM/HaE/1gbMuAh7RIUty4If0=", "dev": true, "requires": { + "JSONStream": "1.3.1", "browser-resolve": "1.11.2", "cached-path-relative": "1.0.1", "concat-stream": "1.5.2", @@ -803,7 +843,6 @@ "detective": "4.5.0", "duplexer2": "0.1.4", "inherits": "2.0.3", - "JSONStream": "1.3.1", "parents": "1.0.1", "readable-stream": "2.3.3", "resolve": "1.4.0", @@ -3667,45 +3706,6 @@ } } }, - "LiveScript": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/LiveScript/-/LiveScript-1.3.1.tgz", - "integrity": "sha1-kBlsSFP+SaPGGCsF5PK69ZjmhW8=", - "dev": true, - "requires": { - "optionator": "0.8.2", - "prelude-ls": "1.1.2", - "source-map": "0.5.6" - }, - "dependencies": { - "optionator": { - "version": "0.8.2", - "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.2.tgz", - "integrity": "sha1-NkxeQJ0/TWMB1sC0wFu6UBgK62Q=", - "dev": true, - "requires": { - "deep-is": "0.1.3", - "fast-levenshtein": "2.0.6", - "levn": "0.3.0", - "prelude-ls": "1.1.2", - "type-check": "0.3.2", - "wordwrap": "1.0.0" - } - }, - "source-map": { - "version": "0.5.6", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz", - "integrity": "sha1-dc449SvwczxafwwRjYEzSiu19BI=", - "dev": true - }, - "wordwrap": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz", - "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=", - "dev": true - } - } - }, "lodash": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/lodash/-/lodash-1.0.2.tgz", @@ -4323,13 +4323,6 @@ "duplexer2": "0.0.2" } }, - "nan": { - "version": "2.6.2", - "resolved": "https://registry.npmjs.org/nan/-/nan-2.6.2.tgz", - "integrity": "sha1-5P805slf37WuzAjeZZb0NgWn20U=", - "dev": true, - "optional": true - }, "natives": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/natives/-/natives-1.1.0.tgz", @@ -6456,7 +6449,6 @@ "requires": { "anymatch": "1.3.0", "async-each": "1.0.1", - "fsevents": "1.1.2", "glob-parent": "2.0.0", "inherits": "2.0.3", "is-binary-path": "1.0.1", @@ -6475,12 +6467,6 @@ "version": "1.1.2", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.1.2.tgz", "integrity": "sha512-Sn44E5wQW4bTHXvQmvSHwqbuiXtduD6Rrjm2ZtUEGbyrig+nUH3t/QD4M4/ZXViY556TBpRgZkHLDx3JxPwxiw==", - "dev": true, - "optional": true, - "requires": { - "nan": "2.6.2", - "node-pre-gyp": "0.6.36" - }, "dependencies": { "abbrev": { "version": "1.1.0", @@ -6511,13 +6497,7 @@ }, "are-we-there-yet": { "version": "1.1.4", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "delegates": "1.0.0", - "readable-stream": "2.2.9" - } + "bundled": true }, "asn1": { "version": "0.2.3", @@ -6556,12 +6536,7 @@ }, "bcrypt-pbkdf": { "version": "1.0.1", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "tweetnacl": "0.14.5" - } + "bundled": true }, "block-stream": { "version": "0.0.9", @@ -6729,41 +6704,15 @@ }, "fstream": { "version": "1.0.11", - "bundled": true, - "dev": true, - "requires": { - "graceful-fs": "4.1.11", - "inherits": "2.0.3", - "mkdirp": "0.5.1", - "rimraf": "2.6.1" - } + "bundled": true }, "fstream-ignore": { "version": "1.0.5", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "fstream": "1.0.11", - "inherits": "2.0.3", - "minimatch": "3.0.4" - } + "bundled": true }, "gauge": { "version": "2.7.4", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "aproba": "1.1.1", - "console-control-strings": "1.1.0", - "has-unicode": "2.0.1", - "object-assign": "4.1.1", - "signal-exit": "3.0.2", - "string-width": "1.0.2", - "strip-ansi": "3.0.1", - "wide-align": "1.1.2" - } + "bundled": true }, "getpass": { "version": "0.1.7", @@ -6784,16 +6733,7 @@ }, "glob": { "version": "7.1.2", - "bundled": true, - "dev": true, - "requires": { - "fs.realpath": "1.0.0", - "inflight": "1.0.6", - "inherits": "2.0.3", - "minimatch": "3.0.4", - "once": "1.4.0", - "path-is-absolute": "1.0.1" - } + "bundled": true }, "graceful-fs": { "version": "4.1.11", @@ -6824,15 +6764,7 @@ }, "hawk": { "version": "3.1.3", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "boom": "2.10.1", - "cryptiles": "2.0.5", - "hoek": "2.16.3", - "sntp": "1.0.9" - } + "bundled": true }, "hoek": { "version": "2.16.3", @@ -6841,23 +6773,11 @@ }, "http-signature": { "version": "1.1.1", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "assert-plus": "0.2.0", - "jsprim": "1.4.0", - "sshpk": "1.13.0" - } + "bundled": true }, "inflight": { "version": "1.0.6", - "bundled": true, - "dev": true, - "requires": { - "once": "1.4.0", - "wrappy": "1.0.2" - } + "bundled": true }, "inherits": { "version": "2.0.3", @@ -6940,14 +6860,6 @@ "jsprim": { "version": "1.4.0", "bundled": true, - "dev": true, - "optional": true, - "requires": { - "assert-plus": "1.0.0", - "extsprintf": "1.0.2", - "json-schema": "0.2.3", - "verror": "1.3.6" - }, "dependencies": { "assert-plus": { "version": "1.0.0", @@ -6999,20 +6911,7 @@ }, "node-pre-gyp": { "version": "0.6.36", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "mkdirp": "0.5.1", - "nopt": "4.0.1", - "npmlog": "4.1.0", - "rc": "1.2.1", - "request": "2.81.0", - "rimraf": "2.6.1", - "semver": "5.3.0", - "tar": "2.2.1", - "tar-pack": "3.4.0" - } + "bundled": true }, "nopt": { "version": "4.0.1", @@ -7026,15 +6925,7 @@ }, "npmlog": { "version": "4.1.0", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "are-we-there-yet": "1.1.4", - "console-control-strings": "1.1.0", - "gauge": "2.7.4", - "set-blocking": "2.0.0" - } + "bundled": true }, "number-is-nan": { "version": "1.0.1", @@ -7055,11 +6946,7 @@ }, "once": { "version": "1.4.0", - "bundled": true, - "dev": true, - "requires": { - "wrappy": "1.0.2" - } + "bundled": true }, "os-homedir": { "version": "1.0.2", @@ -7114,14 +7001,6 @@ "rc": { "version": "1.2.1", "bundled": true, - "dev": true, - "optional": true, - "requires": { - "deep-extend": "0.4.2", - "ini": "1.3.4", - "minimist": "1.2.0", - "strip-json-comments": "2.0.1" - }, "dependencies": { "minimist": { "version": "1.2.0", @@ -7133,55 +7012,15 @@ }, "readable-stream": { "version": "2.2.9", - "bundled": true, - "dev": true, - "requires": { - "buffer-shims": "1.0.0", - "core-util-is": "1.0.2", - "inherits": "2.0.3", - "isarray": "1.0.0", - "process-nextick-args": "1.0.7", - "string_decoder": "1.0.1", - "util-deprecate": "1.0.2" - } + "bundled": true }, "request": { "version": "2.81.0", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "aws-sign2": "0.6.0", - "aws4": "1.6.0", - "caseless": "0.12.0", - "combined-stream": "1.0.5", - "extend": "3.0.1", - "forever-agent": "0.6.1", - "form-data": "2.1.4", - "har-validator": "4.2.1", - "hawk": "3.1.3", - "http-signature": "1.1.1", - "is-typedarray": "1.0.0", - "isstream": "0.1.2", - "json-stringify-safe": "5.0.1", - "mime-types": "2.1.15", - "oauth-sign": "0.8.2", - "performance-now": "0.2.0", - "qs": "6.4.0", - "safe-buffer": "5.0.1", - "stringstream": "0.0.5", - "tough-cookie": "2.3.2", - "tunnel-agent": "0.6.0", - "uuid": "3.0.1" - } + "bundled": true }, "rimraf": { "version": "2.6.1", - "bundled": true, - "dev": true, - "requires": { - "glob": "7.1.2" - } + "bundled": true }, "safe-buffer": { "version": "5.0.1", @@ -7190,183 +7029,93 @@ }, "semver": { "version": "5.3.0", - "bundled": true, - "dev": true, - "optional": true + "bundled": true }, "set-blocking": { "version": "2.0.0", - "bundled": true, - "dev": true, - "optional": true + "bundled": true }, "signal-exit": { "version": "3.0.2", - "bundled": true, - "dev": true, - "optional": true + "bundled": true }, "sntp": { "version": "1.0.9", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "hoek": "2.16.3" - } + "bundled": true }, "sshpk": { "version": "1.13.0", "bundled": true, - "dev": true, - "optional": true, - "requires": { - "asn1": "0.2.3", - "assert-plus": "1.0.0", - "bcrypt-pbkdf": "1.0.1", - "dashdash": "1.14.1", - "ecc-jsbn": "0.1.1", - "getpass": "0.1.7", - "jodid25519": "1.0.2", - "jsbn": "0.1.1", - "tweetnacl": "0.14.5" - }, "dependencies": { "assert-plus": { "version": "1.0.0", - "bundled": true, - "dev": true, - "optional": true + "bundled": true } } }, - "string_decoder": { - "version": "1.0.1", - "bundled": true, - "dev": true, - "requires": { - "safe-buffer": "5.0.1" - } - }, "string-width": { "version": "1.0.2", - "bundled": true, - "dev": true, - "requires": { - "code-point-at": "1.1.0", - "is-fullwidth-code-point": "1.0.0", - "strip-ansi": "3.0.1" - } + "bundled": true + }, + "string_decoder": { + "version": "1.0.1", + "bundled": true }, "stringstream": { "version": "0.0.5", - "bundled": true, - "dev": true, - "optional": true + "bundled": true }, "strip-ansi": { "version": "3.0.1", - "bundled": true, - "dev": true, - "requires": { - "ansi-regex": "2.1.1" - } + "bundled": true }, "strip-json-comments": { "version": "2.0.1", - "bundled": true, - "dev": true, - "optional": true + "bundled": true }, "tar": { "version": "2.2.1", - "bundled": true, - "dev": true, - "requires": { - "block-stream": "0.0.9", - "fstream": "1.0.11", - "inherits": "2.0.3" - } + "bundled": true }, "tar-pack": { "version": "3.4.0", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "debug": "2.6.8", - "fstream": "1.0.11", - "fstream-ignore": "1.0.5", - "once": "1.4.0", - "readable-stream": "2.2.9", - "rimraf": "2.6.1", - "tar": "2.2.1", - "uid-number": "0.0.6" - } + "bundled": true }, "tough-cookie": { "version": "2.3.2", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "punycode": "1.4.1" - } + "bundled": true }, "tunnel-agent": { "version": "0.6.0", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "safe-buffer": "5.0.1" - } + "bundled": true }, "tweetnacl": { "version": "0.14.5", - "bundled": true, - "dev": true, - "optional": true + "bundled": true }, "uid-number": { "version": "0.0.6", - "bundled": true, - "dev": true, - "optional": true + "bundled": true }, "util-deprecate": { "version": "1.0.2", - "bundled": true, - "dev": true + "bundled": true }, "uuid": { "version": "3.0.1", - "bundled": true, - "dev": true, - "optional": true + "bundled": true }, "verror": { "version": "1.3.6", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "extsprintf": "1.0.2" - } + "bundled": true }, "wide-align": { "version": "1.1.2", - "bundled": true, - "dev": true, - "optional": true, - "requires": { - "string-width": "1.0.2" - } + "bundled": true }, "wrappy": { "version": "1.0.2", - "bundled": true, - "dev": true + "bundled": true } } }, diff --git a/src/ReactSelectize.ls b/src/ReactSelectize.ls index 5ca042d..50e9f92 100644 --- a/src/ReactSelectize.ls +++ b/src/ReactSelectize.ls @@ -1,5 +1,5 @@ -# prelude ls -{each, filter, find, find-index, id, initial, last, map, obj-to-pairs, +# prelude ls +{each, filter, find, find-index, id, initial, last, map, obj-to-pairs, partition, reject, reverse, Str, sort-by, sum, values} = require \prelude-ls {clamp, is-equal-to-object} = require \prelude-extension @@ -55,7 +55,7 @@ module.exports = class ReactSelectize extends React.Component # render-value :: Int -> Item -> ReactElement render-value: ({label}) -> - div do + div do class-name: \simple-value span null, label @@ -66,7 +66,7 @@ module.exports = class ReactSelectize extends React.Component render-reset-button: ResetButton # restore-on-backspace: ((value) -> ) # Item -> String - + # used to block default behaviour of option.mouseover when triggered by scrolling using arrow keys scroll-lock: false @@ -85,16 +85,16 @@ module.exports = class ReactSelectize extends React.Component # render :: () -> ReactElement render: -> - anchor-index = + anchor-index = | (typeof @props.anchor == \undefined) or @props.anchor == null => -1 | _ => (find-index (~> it `@is-equal-to-object` @props.anchor), @props.values) ? @props.values.length - 1 # render-selected-values :: [Int] -> [ValueWrapper] - render-selected-values = (selected-values) ~> - selected-values |> map (index) ~> + render-selected-values = (selected-values) ~> + selected-values |> map (index) ~> item = @props.values[index] uid = @props.uid item - ValueWrapper do + ValueWrapper do key: @uid-to-string uid uid: uid item: item @@ -103,7 +103,7 @@ module.exports = class ReactSelectize extends React.Component flipped = @props.dropdown-direction == -1 # REACT SELECTIZE - div do + div do class-name: class-name-from-object do \react-selectize : 1 "#{@props.theme}" : 1 @@ -115,17 +115,17 @@ module.exports = class ReactSelectize extends React.Component tethered: @props.tether style: @props.style - + if !!@props.name # HIDDEN INPUT (for form submission) - input do + input do type: \hidden name: @props.name - value: @props.serialize @props.values + value: @props.serialize @props.values # CONTROL - div do + div do class-name: \react-selectize-control ref: \control @@ -138,7 +138,7 @@ module.exports = class ReactSelectize extends React.Component <~ @props.on-anchor-change last @props.values <~ @on-open-change true - # avoid cancelling the event when the dropdown is already open + # avoid cancelling the event when the dropdown is already open # as this would block selection of text in the search field if !@props.open cancel-event e @@ -148,12 +148,12 @@ module.exports = class ReactSelectize extends React.Component # PLACEHOLDER div class-name: \react-selectize-placeholder, @props.placeholder - div do + div do class-name: \react-selectize-search-field-and-selected-values # LIST OF SELECTED VALUES (BEFORE & INCLUDING THE ANCHOR) render-selected-values [0 to anchor-index] - + # SEARCH INPUT BOX ResizableInput do {disabled: @props.disabled} <<< @props.input-props <<< { @@ -172,11 +172,11 @@ module.exports = class ReactSelectize extends React.Component on-focus: (e) !~> # @focus-lock propery is set to true by invoking the @focus-on-input! method # if @focus-lock is false, it implies this focus event was fired as a result of an external action - <~ do ~> (callback) ~> - if !!@focus-lock - callback @focus-lock = false - - else + <~ do ~> (callback) ~> + if !!@focus-lock + callback @focus-lock = false + + else <~ @on-open-change true callback true @@ -185,13 +185,14 @@ module.exports = class ReactSelectize extends React.Component on-blur: (e) ~> # to prevent closing the dropdown when the user tries to click & drag the scrollbar in IE - dropDownClassName = findDOMNode(this$.refs.dropdownMenu).classList[0] + dropdownDOMNode = findDOMNode(@refs.dropdownMenu); - if @refs.dropdownMenu && document.activeElement.isEqualNode(findDOMNode(@refs.dropdownMenu)) + if dropdownDOMNode + dropDownClassName = dropdownDOMNode.classList[0] + if document.activeElement.isEqualNode(dropdownDOMNode) return - else if (!!document.querySelector(".#{dropDownClassName}:hover")) + else if (!!document.querySelector(".#{dropDownClassName}:hover")) return @refs.search.focus() - <~ @close-dropdown # fire on-blur event listener @@ -206,11 +207,11 @@ module.exports = class ReactSelectize extends React.Component # LIST OF SELECTED VALUES (AFTER THE ANCHOR) render-selected-values [anchor-index + 1 til @props.values.length] - + if @props.values.length > 0 and !@props.hide-reset-button # RESET BUTTON - div do + div do class-name: \react-selectize-reset-button-container on-click: (e) ~> do ~> @@ -221,7 +222,7 @@ module.exports = class ReactSelectize extends React.Component @props.render-reset-button! # TOGGLE BUTTON - div do + div do class-name: \react-selectize-toggle-button-container on-mouse-down: (e) ~> if @props.open @@ -230,13 +231,13 @@ module.exports = class ReactSelectize extends React.Component <~ @props.on-anchor-change last @props.values <~ @on-open-change true cancel-event e - @props.render-toggle-button do + @props.render-toggle-button do open: @props.open flipped: flipped - - + + # (TETHERED / ANIMATED / SIMPLE) DROPDOWN - DropdownMenu {} <<< @props <<< + DropdownMenu {} <<< @props <<< ref: \dropdownMenu class-name: class-name-from-object do \react-selectize : 1 @@ -252,7 +253,7 @@ module.exports = class ReactSelectize extends React.Component # bottom-anchor :: () -> ReactElement bottom-anchor: ~> find-DOM-node @refs.control - tether-props: {} <<< @props.tether-props <<< + tether-props: {} <<< @props.tether-props <<< # used when @props.tether is true # target :: () -> ReactElement @@ -276,8 +277,8 @@ module.exports = class ReactSelectize extends React.Component switch e.which # BACKSPACE - | 8 => - + | 8 => + return if @props.search.length > 0 or anchor-index == -1 do ~> @@ -285,11 +286,11 @@ module.exports = class ReactSelectize extends React.Component anchor-index-on-remove = anchor-index next-anchor = if (anchor-index - 1) < 0 then undefined else @props.values[anchor-index - 1] - # remove the item at the current carret position, - # by requesting the user to update the values array, + # remove the item at the current carret position, + # by requesting the user to update the values array, # via (@props.on-value-change new-values, callback) value-to-remove = @props.values[anchor-index] - <~ @props.on-values-change do + <~ @props.on-values-change do (@props.values |> reject ~> it `@is-equal-to-object` value-to-remove) ? [] # result is true if the user removed the value we requested him to remove @@ -301,23 +302,23 @@ module.exports = class ReactSelectize extends React.Component <~ @props.on-search-change @props.restore-on-backspace value-to-remove callback true - else + else callback true - else + else callback false if !!result - # highlight the first option in the dropdown - @highlight-and-scroll-to-selectable-option do + # highlight the first option in the dropdown + @highlight-and-scroll-to-selectable-option do @props.first-option-index-to-highlight @props.options 1 - # change the anchor iff the user removed the requested value + # change the anchor iff the user removed the requested value # and the predicted next-anchor is still present if anchor-index == anchor-index-on-remove and ( - typeof next-anchor == \undefined or + typeof next-anchor == \undefined or !!(@props.values |> find ~> it `@is-equal-to-object` next-anchor) ) <~ @props.on-anchor-change next-anchor @@ -327,20 +328,20 @@ module.exports = class ReactSelectize extends React.Component # ESCAPE | 27 => # first hit closes the list of options, second hit will reset the selected values - <~ do ~> - if @props.open + <~ do ~> + if @props.open ~> @on-open-change false, it - else + else ~> @props.on-values-change [], it <~ @props.on-search-change "" @focus-on-input! # ENTER - if @props.open and + if @props.open and e.which in [13] ++ @props.delimiters and # do not interfere with hotkeys like control + enter or command + enter !(e?.meta-key or e?.ctrl-key or e?.shift-key) - + # select the highlighted option (if any) result = @select-highlighted-uid anchor-index, (selected-value) ~> if typeof selected-value == \undefined @@ -351,24 +352,24 @@ module.exports = class ReactSelectize extends React.Component # move anchor position left / right using arrow keys (only when search field is empty) if @props.search.length == 0 - + switch e.which # LEFT ARROW | 37 => @props.on-anchor-change do - if ((anchor-index - 1) < 0 or e.meta-key) - undefined - else + if ((anchor-index - 1) < 0 or e.meta-key) + undefined + else @props.values[clamp (anchor-index - 1), 0, (@props.values.length - 1)] (->) # RIGHT ARROW | 39 => @props.on-anchor-change do - if e.meta-key - last @props.values - else + if e.meta-key + last @props.values + else @props.values[clamp (anchor-index + 1), 0, (@props.values.length - 1)] (->) @@ -376,9 +377,9 @@ module.exports = class ReactSelectize extends React.Component # wrap around upon hitting the boundary # UP ARROW - | 38 => + | 38 => @props.on-scroll-lock-change true - index = + index = | typeof @props.highlighted-uid == \undefined => 0 | _ => -1 + @option-index-from-uid @props.highlighted-uid result <~ @highlight-and-scroll-to-selectable-option index, -1 @@ -386,9 +387,9 @@ module.exports = class ReactSelectize extends React.Component @highlight-and-scroll-to-selectable-option (@props.options.length - 1), -1 # DOWN ARROW - | 40 => + | 40 => @props.on-scroll-lock-change true - index = + index = | typeof @props.highlighted-uid == \undefined => 0 | _ => 1 + @option-index-from-uid @props.highlighted-uid result <~ @highlight-and-scroll-to-selectable-option index, 1 @@ -412,13 +413,13 @@ module.exports = class ReactSelectize extends React.Component if @props.open and !prev-props.open and @props.highlighted-uid == undefined @highlight-and-focus! - # if the list of options was closed then reset highlighted-uid + # if the list of options was closed then reset highlighted-uid if !@props.open and prev-props.open <~ @props.on-highlighted-uid-change undefined # component-will-receive-props :: Props -> () component-will-receive-props: (props) !-> - if (typeof @props.disabled == \undefined or @props.disabled == false) and + if (typeof @props.disabled == \undefined or @props.disabled == false) and (typeof props.disabled != \undefined and props.disabled == true) @on-open-change false, ~> @@ -428,7 +429,7 @@ module.exports = class ReactSelectize extends React.Component # close-dropdown :: (() -> ()) -> () close-dropdown: (callback) !-> <~ @on-open-change false - @props.on-anchor-change do + @props.on-anchor-change do last @props.values callback @@ -455,7 +456,7 @@ module.exports = class ReactSelectize extends React.Component # highlights the first selectable option & moves the cursor to end of the search field # highlight-and-focus :: () -> () highlight-and-focus: !-> - @highlight-and-scroll-to-selectable-option do + @highlight-and-scroll-to-selectable-option do @props.first-option-index-to-highlight @props.options 1 @focus-on-input! @@ -476,7 +477,7 @@ module.exports = class ReactSelectize extends React.Component # on-open-change :: Boolean -> (() -> ()) -> () on-open-change: (open, callback) -> - @props.on-open-change do + @props.on-open-change do if @props.disabled then false else open callback @@ -486,7 +487,7 @@ module.exports = class ReactSelectize extends React.Component if @props.highlighted-uid == undefined callback! return false - + # sanity check index = @option-index-from-uid @props.highlighted-uid if typeof index != \number @@ -499,39 +500,39 @@ module.exports = class ReactSelectize extends React.Component # values = (values behind & including the anchor) + highlighted option + (values ahead of the anchor) <~ @props.on-values-change do - (map (~> @props.values[it]), [0 to anchor-index]) ++ - [option] ++ + (map (~> @props.values[it]), [0 to anchor-index]) ++ + [option] ++ (map (~> @props.values[it]), [anchor-index + 1 til @props.values.length]) value = find (~> it `@is-equal-to-object` option), @props.values if !value callback! return - + # if the user did what we asked, then clear the search and move the anchor ahead of the selected value <~ @props.on-search-change "" <~ @props.on-anchor-change value if !@props.open callback value return - + # highlight the next selectable option result <~ @highlight-and-scroll-to-selectable-option index, 1 if !!result callback value return - + # if there are no highlightable/selectable options (then close the dropdown) - result <~ @highlight-and-scroll-to-selectable-option do + result <~ @highlight-and-scroll-to-selectable-option do @props.first-option-index-to-highlight @props.options 1 - if !result + if !result <~ @on-open-change false callback value else callback value true - + # uid-to-string :: () -> String, only used for the key prop (required by react render), & for refs uid-to-string: (uid) -> (if typeof uid == \object then JSON.stringify else id) uid