jjj / chosen Goto Github PK

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

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>

Proposed resolution

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>

I have a select box with 4 digit years, and it renders like this:

closed:

open:

As a regular select, it renders like this:

closed:

open:

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!

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'.

Steps to reproduce

1. Create a single select component with chosen

2. Provide the data-placeholder value as 'Choose from A & B'

3. Input box gets rendered with placeholder value as 'Choose from A & B'

Expected behavior

placeholder value string should escape characters before rendering.

Actual behavior

Placeholder label is not rendered properly.

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.

Steps to reproduce

Tell us how to reproduce this issue.

1. Open a JJJ Chosen multiselect in a page.

2. Select an item.

3. See that no icon shows to deselect the item (but the transparent button does respond to a hover and a click).

4. 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/

Environment

• 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)

Additional information

Thank you for maintaining this important and awesome project!

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.

Steps to reproduce

Working demo that shows the problem

1. Visit any page with the chosen element
2. Inspect the up/down arrow to the right of the search box
3. Confirm all you see is a <div> containing only a <b> tag (empty tags)

Expected behavior

This element should really be a <button> since it is used to toggle open/closed the list of selection items.

Actual behavior

This element is not "visible" to a screen reader

Environment

• Chosen Version: latest

• jQuery or Prototype Version: n/a

• Browser and Version: n/a

• OS and Version: n/a

Additional information

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.

Please implement harvesthq#2807

It's very important for who needs to customize chosen, using SCSS on a complex project.

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.

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.

Steps to reproduce

1. Open a Chosen drop down
2. Scroll the page out of bounds
3. Notice it does not adapt to fit the viewport

Expected behavior

The drop down should adjust itself, either up or down.

Actual behavior

The drop down retains the state from which it was first made visible.

Environment

• Chosen Version: 2.0.0
• jQuery or Prototype Version: any
• Browser and Version: any
• OS and Version: any

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.

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'm looking to provide aria labels for chosen's text inputs to satisfy WCAG accessibility requirements, like in this issue in the original repository.

Steps to reproduce

1. Install the WAVE extension for Firefox or Chrome.

2. Run the extension on the Chosen demo page.

3. You should see all the form elements that require labels.

Expected behavior

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".

Bower is end-of-life, so we can safely remove support for it.

Chosen should be initialized on mobile otherwise selects with dynamic results (via AJAX, etc) will not function as expected.

Steps to reproduce

Tell us how to reproduce this issue.

1. 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

2. Attempt to use on a mobile browser.

Expected behavior

Dynamic results should be retrieved regardless of the browser used.

Actual behavior

Native select inputs are loaded so additional results cannot be retrieved.

Environment

• Chosen Version: 1.x/2.x

• jQuery or Prototype Version:

• Browser and Version: Mobile

• OS and Version: Mobile

Accessibility alerts about the following error: Anchor element found with link content, but no href, ID or name attribute has been supplied.

Steps to reproduce

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.

Expected behavior

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.

PNG sprites do not scale very well, plus it's yet-another file to include and then override.

Expected behavior

Chosen styles should be super easy to override, and default styling should be super tidy efficient.

Actual behavior

Background images always load, even if they're overridden.

Environment

• Chosen Version: Any
• jQuery or Prototype Version: Any
• Browser and Version: Any
• OS and Version: Any

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.

Steps to reproduce

Tell us how to reproduce this issue.

1. Use any PHP project or start a new one with composer init (this is optional).
2. Run the installation command as in the README: 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). 

Expected behavior

Installation should work

Actual behavior

Error as described above

Environment

• 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

Additional information

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.

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"...

Steps to reproduce

Tell us how to reproduce this issue.

1. Enable JAWS
2. Tab into the element using chosen, but do not expand
3. Listen for the announcement for expanded/collapsed

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

Expected behavior

the aria-expanded value is changing to “true” only after the combo box is explicitly opened

Actual behavior

the aria-expanded value is changing to “true” on focus

Environment

• 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

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>&amp;</span>' to be 'No results match <span>&amp;</span>'. (1)
>> 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:262:61)
>>     at <Jasmine>
     Expected 'No results for: <span>&amp;amp;</span>' to be 'No results match <span>&amp;amp;</span>'. (2)
>> Expected 'No results for: <span>&amp;amp;</span>' to be 'No results match <span>&amp;amp;</span>'. Error: Expected 'No results for: <span>&amp;amp;</span>' to be 'No results match <span>&amp;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 '&lt;/script&gt;&lt;script&gt;console.log(1)&lt;/script&gt;'. (1)
>> Expected '
>>   <span>Select an Option</span>
>>   <div><b></b></div>
>> ' to contain '&lt;/script&gt;&lt;script&gt;console.log(1)&lt;/script&gt;'. Error: Expected '
>>   <span>Select an Option</span>
>>   <div><b></b></div>
>> ' to contain '&lt;/script&gt;&lt;script&gt;console.log(1)&lt;/script&gt;'.
>>     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.

Misc info

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

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

Steps to reproduce

look

Expected behavior

install

Actual behavior

nothing

Environment

any

Additional information

none

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