Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Options remain disabled after enabling a select #1025

Closed
codeflow-biz opened this issue Mar 31, 2022 · 4 comments
Closed

Options remain disabled after enabling a select #1025

codeflow-biz opened this issue Mar 31, 2022 · 4 comments
Labels
bug

Comments

@codeflow-biz
Copy link

Describe the bug
If a select has the disabled attribute set in the original HTML code before Choices is created all options remain disabled after a call to .enable();

To Reproduce
See attached example html file.

Expected behavior
Both example selects are disabled after loading the file. After a click on "enable" the options of the first select remain disabled, the options of the second select are enable correct.

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js@10.1.0/public/assets/styles/base.min.css"/>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js@10.1.0/public/assets/styles/choices.min.css"/>
        <script src="https://cdn.jsdelivr.net/npm/choices.js@10.1.0/public/assets/scripts/choices.min.js"></script>
    </head>
    <body>
    <div class="container">
        <div class="section">
            <label>Buggy init on disabled select</label>
            <select name="test1" id="test1" disabled>
                <option value="1">Option A</option>
                <option value="2" disabled>Option B</option>
                <option value="3">Option C</option>
            </select>
            
            <label>Workaround init on disabled select</label>
            <select name="test2" id="test2" disabled>
                <option value="1">Option A</option>
                <option value="2" disabled>Option B</option>
                <option value="3">Option C</option>
            </select>
            
            <button type="button" onclick="enableBoth()">Enable</button>
            <button type="button" onclick="disableBoth()">Disable</button>
            
        </div>
    </div>
    
    <script type="text/javascript">
    let choices1, choices2;
    
    function enableBoth() {
        choices1.enable();
        choices2.enable();
    }
    function disableBoth() {
        choices1.disable();
        choices2.disable();
    }
    
    (function() { 
    const test1Select = document.getElementById('test1'); 
    choices1 = new Choices(test1Select);
    
    const test2Select = document.getElementById('test2'); 
    test2Select.disabled = false; 
    choices2 = new Choices(test2Select); 
    choices2.disable(); 
    
    })();
    </script>
        
    </body>
</html>
codeflow-biz pushed a commit to codeflow-biz/Choices that referenced this issue May 2, 2022
@sslabschi
Fix for original Choices repo bug Choices-js#1025.
3231536
@kevinleto-informaticon
Copy link

Hi guys. Any chance that the bug will be fixed and a new release will be created?
The fix of @codeflow-biz seems to be really simple.
Thanks!

@eafarooqi
Copy link

hi,
still no release for this fix ?

@codeflow-biz
Copy link
Author

Hi. You can use my fork until the fix is in the main repo. I committed the fully build, ready to use files as well. My build is based on the currently latest release just with 2 or 3 fixes.

Xon added a commit to Xon/Choices.js that referenced this issue Jul 17, 2024
@Xon
Fix options would be disabled when choices.js was intialized on a dis…
f45f3aa 
…abled <select> element

Choices-js#1025
@Xon Xon mentioned this issue Aug 6, 2024
Merged
9 tasks
@Xon
Copy link
Collaborator

Xon commented Aug 22, 2024

Implemented as part of #1166

@Xon Xon closed this as completed Aug 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Xon @eafarooqi @kevinleto-informaticon