π
jjj / chosen Goto Github PK
View Code? Open in Web Editor NEWThis project forked from harvesthq/chosen
Chosen is a library for making long, unwieldy select boxes more friendly.
Home Page: https://jjj.github.io/chosen/
License: Other
This project forked from harvesthq/chosen
Chosen is a library for making long, unwieldy select boxes more friendly.
Home Page: https://jjj.github.io/chosen/
License: Other
Please implement harvesthq#2807
It's very important for who needs to customize chosen, using SCSS on a complex project.
I have a select box with 4 digit years, and it renders like this:
As a regular select, it renders like this:
As I understand, html / browsers attempt to set the width of a select control based on the values ... and generally with normal (non chosen) select boxes, this works fine, and for a 4 digit year, they are all visible, however if I switch to chosen, it is way too narrow.
Mac, with Brave browser, if that matters. Thanks!
The dropdown is visible and you can select items when the input element is disabled:
<select class="chosen-select" multiple disabled>
<option>Praesent vestibulum dapibus nibh</option>
<option selected>Vestibulum facilisis purus</option>
<option>Etiam ultricies nisi</option>
</select>
Create a select input element and add the disabled attribute to it
Click on the select element, the grey/transparent dropdown is visible. You can select items.
https://jsfiddle.net/Lj2qzbwf/
If the field is disabled then it is not possible to interact with it.
https://github.com/JJJ/chosen/blob/master/docs/chosen.jquery.js#L1204
In the container_mousedown()
function, the is_disabled
check is not correctly implemented.
The disabled state must be checked at the beginning of the function. See https://github.com/harvesthq/chosen/blob/master/coffee/chosen.jquery.coffee#L134
Bower is end-of-life, so we can safely remove support for it.
Summarize your issue here.
All css/svg sprite icons are unrenderable in my Chrome on Mac. I've spot-checked them by w3c validator to confirm the same. This is right from vanilla 2.2.0 assets from the compiled ./docs folder.
Tell us how to reproduce this issue.
Open a JJJ Chosen multiselect in a page.
Select an item.
See that no icon shows to deselect the item (but the transparent button does respond to a hover and a click).
Open the expected background icon inline svg uri in browser tab, see error error on line 1 at column 96: AttValue: ' expected
and similar error in w3c validator:
https://validator.w3.org/check?uri=data%3Aimage%2Fsvg%2Bxml%3Bcharset%3DUS-ASCII%2C%3Csvg+xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22+width%3D%2256%22+height%3D%2256%22+viewBox%3D%220+0+56+56%22%3E%3Cpath+fill%3D%22%23888%22+d%3D%22M+27.9999+51.9063+C+41.0546+51.9063+51.9063+41.0781+51.9063+28+C+51.9063+14.9453+41.0312+4.0937+27.9765+4.0937+C+14.8983+4.0937+4.0937+14.9453+4.0937+28+C+4.0937+41.0781+14.9218+51.9063+27.9999+51.9063+Z+M+19.5858+38.4063+C+18.4843+38.4063+17.5936+37.5156+17.5936+36.4141+C+17.5936+35.8750+17.8280+35.4063+18.2030+35.0547+L+25.1874+28.0234+L+18.2030+20.9922+C+17.8280+20.6641+17.5936+20.1719+17.5936+19.6328+C+17.5936+18.5547+18.4843+17.6875+19.5858+17.6875+C+20.1249+17.6875+20.5936+17.8984+20.9452+18.2734+L+27.9765+25.2812+L+35.0546+18.25+C+35.4530+17.8281+35.8749+17.6406+36.3905+17.6406+C+37.4921+17.6406+38.3827+18.5312+38.3827+19.6094+C+38.3827+20.1484+38.1952+20.5937+37.7968+20.9688+L+30.7655+28.0234+L+37.7733+35.0078+C+38.1249+35.3828+38.3593+35.8516+38.3593+36.4141+C+38.3593+37.5156+37.4687+38.4063+36.3671+38.4063+C+35.8046+38.4063+35.3358+38.1719+34.9843+37.8203+L+27.9765+30.7890+L+20.9921+37.8203+C+20.6405+38.1953+20.1249+38.4063+19.5858+38.4063+Z%22%2F%3E%3C%2Fsvg%3E&charset=%28detect+automatically%29&doctype=Inline&group=0
Note, this can also be seen on the JJJ chosen project demo page:
https://jjj.github.io/chosen/
Chosen Version: 2.2.0
jQuery or Prototype Version: 3.5.1
Browser and Version: Chrome Version 85.0.4183.102 (Official Build) (64-bit)
OS and Version: Mac Catlina (10.15.6)
Thank you for maintaining this important and awesome project!
harvesthq#2036 added screen edge detection, allowing for the drop down to drop up when necessary. Once open however, it is always either up or down, and does not react to a change in viewport scroll position.
This enables the awkward user experience depicted below:
As you can see, the drop down can be scrolled upwards beyond where it is visible. It can similarly be done dropped down by default, and will not drop up when space allows.
The drop down should adjust itself, either up or down.
The drop down retains the state from which it was first made visible.
Accessibility alerts about the following error: Anchor element found with link content, but no href, ID or name attribute has been supplied.
Just configure chosen and inspect the code around the drop-down item. Everything is wrapped in the "chosen-single" class link with no href, id or name.
The link <a class="chosen-single">
should be a button if it is an action. Converting it into a button would have a great impact on the library, so I suggest just to add role="button"
as attribute to this link.
No idea if the name is a problem, but I'm assuming it may be in the long term.
Opening this issue as a measure of good faith to show that I'm open to it, if anyone has any issues with keeping it as-is.
I'm looking to provide aria labels for chosen's text inputs to satisfy WCAG accessibility requirements, like in this issue in the original repository.
Install the WAVE extension for Firefox or Chrome.
Run the extension on the Chosen demo page.
You should see all the form elements that require labels.
I would love for an aria label applied to the original select carry over to the text input. Alternatively, I could pass a specific string to the Chosen call to label the text input, i.e. "Find options via autocomplete".
Quite some time ago I submitted harvesthq#2618 to help with harvesthq#536.
I am happy with the approach and for some time I maintain a fork of the project with that fix myself.
Now that this fork is somewhat active I wonder if you would be willing to accept something like that, if so, I will try to work to update it to the current codebase.
node-sass is deprecated, and according to it's page, projects that still use it should move onto Dart Sass (sass). This can lead to different problems, like on my local I couldn't use node-sass because "Node Sass does not yet support your current environment: OS X 64-bit...".
On Gruntfile.coffee we would need to replace const sass = require('node-sass')
with const sass = require('sass')
.
When the data-placeholder attribute for select tag contains '&' - the input component gets rendered as '&Amp'.
Create a single select component with chosen
Provide the data-placeholder value as 'Choose from A & B'
Input box gets rendered with placeholder value as 'Choose from A & B'
placeholder value string should escape characters before rendering.
Placeholder label is not rendered properly.
Chosen should be initialized on mobile otherwise selects with dynamic results (via AJAX, etc) will not function as expected.
Tell us how to reproduce this issue.
Setup an instance that populates results via AJAX such as https://github.com/easydigitaldownloads/easy-digital-downloads/blob/release/3.0/assets/js/admin/components/chosen/index.js#L51
Attempt to use on a mobile browser.
Dynamic results should be retrieved regardless of the browser used.
Native select
inputs are loaded so additional results cannot be retrieved.
Chosen Version: 1.x/2.x
jQuery or Prototype Version:
Browser and Version: Mobile
OS and Version: Mobile
The chosen module provides a little X next to items that have been selected, but it is not implemented in a way that is accessible.
<button type="button" tabindex="-1" class="search-choice-close" data-option-array-index="2"></button>
The button element needs to have some text inside it for screen readers. I recommend the following:
<button type="button" tabindex="-1" class="search-choice-close" data-option-array-index="2"><span class="visually-hidden focusable">Remove selection</span></button>
When landing on the collapsed (closed) combobox, it is announced as βexpandedβ. This is because the aria-expanded
value is changing to βtrueβ on focus, rather than after the user expands the listbox.
The following is the code where the problem occurs:
<input class="chosen-search-input" type="text" role="combobox" aria-expanded="true"...
Tell us how to reproduce this issue.
Additionally, please link to a working demo that shows the issue so we can attempt to reproduce.
https://chosen-jjj-abag2.pantheonsite.io/meetings
The "choose a meeting" element at top right
the aria-expanded
value is changing to βtrueβ only after the combo box is explicitly opened
the aria-expanded
value is changing to βtrueβ on focus
Chosen Version: 2.2.1
jQuery or Prototype Version: jQuery 3.6.0
Browser and Version: Chrome Version 105.0.5195.125 (Official Build) (arm64)
OS and Version: Mac OS 12.6
The chosen module adds a <div>
containing only a <b>
tag to place the arrow to the right of the search box. The arrow is added into that box with a css pseudo-selector. This is not accessible.
This element should really be a <button>
since it is used to toggle open/closed the list of selection items.
Problem markup:
<div><b></b></div>
Recommended alternative:
<div><b><button aria-label="Show options" class="visually-hidden focusable"></button></b></div>
<div><b><button aria-label="Hide options" class="visually-hidden focusable"></button></b></div>
When clicked, the aria-label should be changed to show the action the button will trigger.
Working demo that shows the problem
<div>
containing only a <b>
tag (empty tags)This element should really be a <button>
since it is used to toggle open/closed the list of selection items.
This element is not "visible" to a screen reader
Chosen Version: latest
jQuery or Prototype Version: n/a
Browser and Version: n/a
OS and Version: n/a
Our site is getting warnings from accessibility scans due to this empty element. We would love to get those cleaned up and provide an improvement to everyone using the chosen library.
There is no npm package, so npm install chosen-jjj
is not working.
So upload package in repository or update readme.
See https://www.npmjs.com/~jjj
look
install
nothing
any
none
Please make a simple change log to know what differences are respect the original chosen-js.
Also, this isn't published on npm (Searching it returns nothing), so can't be installed with npm i chosen-jjj
I am looking at the difference between this repo (thank you for maintaining!) and original:
https://github.com/jjj/chosen/releases/
https://github.com/harvesthq/chosen/releases/
and see that this one contains compiled assets under ./docs. I don't know how to extract only that file or how to move that folder into my preferred destination project libraries folder using composer for the Drupal chosen module, so instead I modified where Drupal looks for its assets (by tacking on docs/).
Ok this works, but it's not ideal, and I wonder if I can try something different or if there is something on your end that could be done differently to alleviate this one little workaround (ie. provide compiled assets as a separate download here in the repo or if there is some composer config to extract just what I need and discard source).
Thanks!
-Bronius
PNG sprites do not scale very well, plus it's yet-another file to include and then override.
Chosen styles should be super easy to override, and default styling should be super tidy efficient.
Background images always load, even if they're overridden.
Comparing your implementation to the original harvest one, I noticed that the select drop down arrow is a double arrow pointing up and down. If I want to change it to the single down pointing arrow, is there a way to do that? I don't see a configuration option for something like this.
I also am noticing that the height of the control is taller/bigger. (which may be getting pushed bigger because of the larger double arrow image...) Is there a way to control this?
Thanks for keeping this project alive!
I just try to run the automated tests and I get many errors. A weird thing its that shows "using HeadlessChrome/78". I have installed a more modern versiΓ³n
npm run test
> [email protected] test XXXX/chosen
> grunt test
Running "coffee:jquery" (coffee) task
>> 1 files created.
Running "coffee:proto" (coffee) task
>> 1 files created.
Running "coffee:test" (coffee) task
>> 2 files created.
Running "jasmine:jquery" (jasmine) task
Testing specs with Jasmine/latest via HeadlessChrome/78.0.3882.0
Events
- chosen should fire the right events......X
Expected $.length = 0 to equal 2.
Expected $[0] = undefined to equal 'input'.
Expected $[1] = undefined to equal 'change'. (1)
>> Expected $.length = 0 to equal 2.
>> Expected $[0] = undefined to equal 'input'.
>> Expected $[1] = undefined to equal 'change'. Error: Expected $.length = 0 to equal 2.
>> Expected $[0] = undefined to equal 'input'.
>> Expected $[1] = undefined to equal 'change'.
>> at <Jasmine>
>> at UserContext.<anonymous> (file://XXXX/chosen/spec/public/jquery_specs.js:131:37)
>> at <Jasmine>
search
- should only show max_shown_results items in results......β
- should display only matching items when entering a search term......β
Searching
- does not clear search text or highlight first suggestion when holding ctrl/cmd and selecting multiple items......X
Expected 0 to be 1. (1)
>> Expected 0 to be 1. Error: Expected 0 to be 1.
>> at <Jasmine>
>> at UserContext.<anonymous> (file://XXXX/chosen/spec/public/jquery_specs.js:449:49)
>> at <Jasmine>
Expected 0 to be 2. (2)
>> Expected 0 to be 2. Error: Expected 0 to be 2.
>> at <Jasmine>
>> at UserContext.<anonymous> (file://XXXX/chosen/spec/public/jquery_specs.js:456:49)
>> at <Jasmine>
- matches in non-ascii languages like Chinese when selecting a single item with search_contains......β
- clears search text and highlights first suggestion without ctrl/cmd and selecting multiple items without hide_results_on_select......X
Expected 0 to be 1. (1)
>> Expected 0 to be 1. Error: Expected 0 to be 1.
>> at <Jasmine>
>> at UserContext.<anonymous> (file://XXXX/chosen/spec/public/jquery_specs.js:490:49)
>> at <Jasmine>
Expected 's' to be ''. (2)
>> Expected 's' to be ''. Error: Expected 's' to be ''.
>> at <Jasmine>
>> at UserContext.<anonymous> (file://XXXX/chosen/spec/public/jquery_specs.js:491:34)
>> at <Jasmine>
Expected 'active-result' to contain 'highlighted'. (3)
>> Expected 'active-result' to contain 'highlighted'. Error: Expected 'active-result' to contain 'highlighted'.
>> at <Jasmine>
>> at UserContext.<anonymous> (file://XXXX/chosen/spec/public/jquery_specs.js:492:70)
>> at <Jasmine>
- matches in non-ascii languages like Chinese when selecting multiple items......β
respects word boundaries when not using search_contains
- correctly finds words that start after a(n) leftquote......β
- correctly finds words that start after a(n) guillemet......β
- correctly finds words that start after a(n) lcurly......β
- correctly finds words that start after a(n) lbrace......β
- correctly finds words that start after a(n) upsidedownqmark......β
- correctly finds words that start after a(n) upsidedownbang......β
- correctly finds words that start after a(n) leftsinglequote......β
- correctly finds words that start after a(n) angledleftsinglequote......β
- correctly finds words that start after a(n) angledleftquote......β
- correctly finds words that start after a(n) langle......β
- correctly finds words that start after a(n) lparen......β
- correctly finds words that start after a(n) dash......β
- correctly finds words that start after a(n) period......β
- highlights results correctly when multiple words are present......β
- should not match the actual text of HTML entities......β
- renders options correctly when they contain characters that require HTML encoding......β
- renders no results message correctly when it contains characters that require HTML encoding......X
Expected 'No results for: <span>&</span>' to be 'No results match <span>&</span>'. (1)
>> Expected 'No results for: <span>&</span>' to be 'No results match <span>&</span>'. Error: Expected 'No results for: <span>&</span>' to be 'No results match <span>&</span>'.
>> at <Jasmine>
>> at UserContext.<anonymous> (file://XXXX/chosen/spec/public/jquery_specs.js:262:61)
>> at <Jasmine>
Expected 'No results for: <span>&amp;</span>' to be 'No results match <span>&amp;</span>'. (2)
>> Expected 'No results for: <span>&amp;</span>' to be 'No results match <span>&amp;</span>'. Error: Expected 'No results for: <span>&amp;</span>' to be 'No results match <span>&amp;</span>'.
>> at <Jasmine>
>> at UserContext.<anonymous> (file://XXXX/chosen/spec/public/jquery_specs.js:266:68)
>> at <Jasmine>
- matches in non-ascii languages like Chinese when selecting a single item......β
- renders optgroups correctly when they contain html encoded tags......β
- renders optgroups correctly when they contain characters that require HTML encoding when searching......β
- matches in non-ascii languages like Chinese when selecting multiple items with search_contains......β
Bugfixes
- https://github.com/harvesthq/chosen/issues/2996 - XSS Vulnerability with `include_group_label_in_selected: true`......X
Expected '
<span>Select an Option</span>
<div><b></b></div>
' to contain '</script><script>console.log(1)</script>'. (1)
>> Expected '
>> <span>Select an Option</span>
>> <div><b></b></div>
>> ' to contain '</script><script>console.log(1)</script>'. Error: Expected '
>> <span>Select an Option</span>
>> <div><b></b></div>
>> ' to contain '</script><script>console.log(1)</script>'.
>> at <Jasmine>
>> at UserContext.<anonymous> (file://XXXX/chosen/spec/public/jquery_specs.js:103:33)
>> at <Jasmine>
Basic setup
data-placeholder
- should render with special characters......β
- should render......β
disabled fieldset
- should render as disabled......β
- should create very basic chosen......X
Expected '' to be 'Afghanistan'. (1)
>> Expected '' to be 'Afghanistan'. Error: Expected '' to be 'Afghanistan'.
>> at <Jasmine>
>> at UserContext.<anonymous> (file://XXXX/chosen/spec/public/jquery_specs.js:26:35)
>> at <Jasmine>
- it should not render hidden options......β
- it should not render hidden optgroups......β
- should add chosen to jQuery object......β
36 specs in 0.346s.
>> 6 failures
Warning: Task "jasmine:jquery" failed.οΏ½ Use --force to continue.
Aborted due to warnings.
Where I ran this had :
Ryzen 7 3700X with 16GiB
KUbuntu 20.04
nodejs : v12.13.1
npm: v6.14.8
Firefox: 80.0.1
Chrome: 85.0.4
Chromiun: 85.0.4
Chrome webdriver : 85.0.4
This library is not available on Packagist. This means that one of the installation instructions using composer doesn't work. There is a workaround where we can add a custom repository in composer.json but the fix is straightforward. The problem is that the maintainer needs to do this.
Tell us how to reproduce this issue.
composer init
(this is optional).composer require jjj/chosen
It's not a JavaScript error, so I can't show this anyplace but I am happy to share a screenshot. This is the error though:
[InvalidArgumentException]
Could not find a matching version of package jjj/chosen. Check the package spelling, your version constraint and that the package is available
in a stability which matches your minimum-stability (dev).
Installation should work
Error as described above
Chosen Version: N/A
jQuery or Prototype Version: N/A
Browser and Version: N/A
OS and Version: macOS with PHP 7.4 but I believe this shouldn't matter
The "fix" for this is relatively simple (thanks to the composer.json
which is already in this repo). The maintainer just needs to add this to packagist. I tried adding it but couldn't as there is already a package under JJJ namespace. The maintainer (I am assuming @JJJ) has added the previous package and needs to add this as well. Adding the package is fairly simple and I can help with that if required.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.