Code Monkey home page Code Monkey logo

cd-select-autocomplete-changelog's Introduction

📦 Select Autocomplete - changelog

Use this repository to report bugs and get notified about changes affecting the Select Autocomplete component.

Before reporting a bug, please make sure to check the 'info page' of the component.

When reporting a bug, please make sure to include the following info:

  1. Short description of the bug
  2. Steps to reproduce the bug
  3. Browser + Operating system
  4. (Optional) A link to a live demo
  5. (Optional) A screencast/screenshot of the issue

⚠️ Please be aware it's impossible for us to help you integrate the component in your code, or check for bugs when the component is part of a complex project.

Component Library

CodyHouse's Components are accessible, progressively enhanced, HTML, CSS, JS components that work seamlessly with the framework.

Explore the Components

cd-select-autocomplete-changelog's People

Contributors

claudia-romano avatar

Watchers

avatar avatar avatar avatar

cd-select-autocomplete-changelog's Issues

[Suggestion] Provide events for onSelectionChange

It would be great if you could provide some events at SelectAuto and possibly for Autocomplete.

The events I am looking after are onChange for Autocomplete and onSelectChange for SelectAuto.

The onChange would trigger when the underlying input changes value and onSelectChange would trigger when the user makes a selection from the options or type an option correctly.

How to initialise the same field in a repeater group multiple times

Hi,

I'm using the Kwes Forms repeater field component alongside this one. Link here - https://kwesforms.com/docs/v2/repeater-fields

When the first set of fields are on the page, everything works fine, but when I try to add another group containing the same fields, the dropdown with the select values just doesn't appear. Here's the form if you want to take a look - https://vcuae-test-2.onrender.com/request-a-quote-form

How do I initialise the fields each time one is added, so the dropdown shows up?

Thanks!

Component doesn't work or take into account options outside the optgroup

Component doesn't take into account the options that are not grouped into a optgroup.

Example:

<select name="cars" id="cars">
  <option value="spyker">Spyker</option>
  <option value="donkervoort">Donkervoort</option>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

The component will render/print only the list items within the optgroup.

Clicking on the select it doesn't always open the options

Steps:

  • click on selectbox and select 'Harry Potter'
  • While the selectbox is still focused click again

What is does:
It doesn't open the options

What i was expecting:
To open the options

Notes:
It opens the options only when it's gettings the focus from unfocus state

Any change you could point me in the right direction of re-initializing this component

Re-opened... tried the approach of re-initializing in the docs where you delete the js file and re-add it after.

https://codyhouse.co/ds/docs/components#reinit-components

var pageScript = document.getElementById('page-script');
if(pageScript) pageScript.remove();
// append new script
var script = document.createElement('script');
script.setAttribute('src', 'assets/js/about.js'); // the src value should change according to the page
script.setAttribute('id','page-script');
document.body.appendChild(script);

This solution does not works and breaks other components.

Basically i want to re-initialize the Select autocomplete everytime when i'm getting dynamic list of values.

var modelModel = document.getElementById('modelmodel');
console.log(modelModel);

Console log:

<div id="modelmodel" class="autocomplete position-relative select-auto js-select-auto js-autocomplete" data-autocomplete-dropdown-visible-class="autocomplete--results-visible">
   <label class="form-label text-sm margin-bottom-xxs" for="model">Model</label>
   <!-- select -->
   <select class="js-select-auto__select is-hidden" id="dynamicModels">
      <option value="310">B-MAX</option>
      <option value="311">C-MAX</option>
      <option value="312">Capri</option>
      <option value="313">Cougar</option>
      <option value="314">EcoSport</option>
      <option value="315">Edge</option>
      <option value="316">Escort</option>
      <option value="317">Excursion</option>
      <option value="318">Expedition</option>
      <option value="319">Explorer</option>
      <option value="320">F150</option>
      <option value="321">F250</option>
      <option value="322">F350</option>
      <option value="323">Fiesta</option>
      <option value="324">Focus</option>
      <option value="325">Focus C-MAX</option>
      <option value="326">Fordor</option>
      <option value="327">Freestar</option>
      <option value="328">Fusion</option>
      <option value="329">Galaxy</option>
      <option value="330">Grand Torino</option>
      <option value="331">Ka</option>
      <option value="332">Kuga</option>
      <option value="333">Ltd</option>
      <option value="334">Maverick</option>
      <option value="335">Mondeo</option>
      <option value="336">Mustang</option>
      <option value="337">Orion</option>
      <option value="338">Probe</option>
      <option value="339">Puma</option>
      <option value="340">S-MAX</option>
      <option value="341">Scorpio</option>
      <option value="342">Shelby</option>
      <option value="343">Taurus</option>
      <option value="344">Thunderbird</option>
      <option value="345">Tourneo</option>
      <option value="346">Transit</option>
      <option value="347">Transit Connect</option>
      <option value="348">Transit Custom</option>
      <option value="349">Windstar</option>
   </select>
   <!-- input -->
   <div class="select-auto__input-wrapper">
      <input class="form-control js-autocomplete__input js-select-auto__input" type="text" name="model" id="model" placeholder="e.g. C8 Preliator" autocomplete="off" role="combobox" aria-autocomplete="list" aria-owns="listModels">
      <div class="select-auto__input-icon-wrapper">
         <!-- arrow icon -->
         <svg class="icon" viewBox="0 0 16 16">
            <title>Open selection</title>
            <polyline points="1 5 8 12 15 5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
         </svg>
         <!-- close X icon -->
         <button class="reset select-auto__input-btn js-select-auto__input-btn js-tab-focus" style="outline: none;">
            <svg class="icon" viewBox="0 0 16 16">
               <title>Reset selection</title>
               <path d="M8,0a8,8,0,1,0,8,8A8,8,0,0,0,8,0Zm3.707,10.293a1,1,0,1,1-1.414,1.414L8,9.414,5.707,11.707a1,1,0,0,1-1.414-1.414L6.586,8,4.293,5.707A1,1,0,0,1,5.707,4.293L8,6.586l2.293-2.293a1,1,0,1,1,1.414,1.414L9.414,8Z"></path>
            </svg>
         </button>
      </div>
   </div>
   <!-- dropdown -->
   <div class="autocomplete__results select-auto__results js-autocomplete__results">
      <ul id="listModels" class="autocomplete__list js-autocomplete__list" role="list">
      </ul>
   </div>
   <p class="sr-only" aria-live="polite" aria-atomic="true"><span class="js-autocomplete__aria-results">0</span> results found.</p>
</div>

var selectModel = document.getElementById('dynamicModels');
console.log(selectModel);

Console log:

<select class="js-select-auto__select is-hidden" id="dynamicModels">
   <option value="310">B-MAX</option>
   <option value="311">C-MAX</option>
   <option value="312">Capri</option>
   <option value="313">Cougar</option>
   <option value="314">EcoSport</option>
   <option value="315">Edge</option>
   <option value="316">Escort</option>
   <option value="317">Excursion</option>
   <option value="318">Expedition</option>
   <option value="319">Explorer</option>
   <option value="320">F150</option>
   <option value="321">F250</option>
   <option value="322">F350</option>
   <option value="323">Fiesta</option>
   <option value="324">Focus</option>
   <option value="325">Focus C-MAX</option>
   <option value="326">Fordor</option>
   <option value="327">Freestar</option>
   <option value="328">Fusion</option>
   <option value="329">Galaxy</option>
   <option value="330">Grand Torino</option>
   <option value="331">Ka</option>
   <option value="332">Kuga</option>
   <option value="333">Ltd</option>
   <option value="334">Maverick</option>
   <option value="335">Mondeo</option>
   <option value="336">Mustang</option>
   <option value="337">Orion</option>
   <option value="338">Probe</option>
   <option value="339">Puma</option>
   <option value="340">S-MAX</option>
   <option value="341">Scorpio</option>
   <option value="342">Shelby</option>
   <option value="343">Taurus</option>
   <option value="344">Thunderbird</option>
   <option value="345">Tourneo</option>
   <option value="346">Transit</option>
   <option value="347">Transit Connect</option>
   <option value="348">Transit Custom</option>
   <option value="349">Windstar</option>
</select>

So i hoped that i could re-initialize somehow the Select autocomplete component.

var modelModel = document.getElementById('modelmodel');
var selectModel = document.getElementById('dynamicModels');
new SelectAuto({
	element: modelModel,
	selectOptions: selectModel
});

But getting a Uncaught ReferenceError: SelectAuto is not defined.

Any ideas on how to solve it and putting me in the right direction?

So basically i'm doing a ajax request fetching models after changing the make. I cleanup the options and re-populate the select field with the new models.

Now i need to figure how i'm able to reinitialize the results in the component.

var test = new Autocomplete({
	element: modelModel,
	selectOptions: selectModel
});
console.log(test);

Console.log results

    "options": {
        "element": {},
        "debounce": 200,
        "characters": 2,
        "searchData": false,
        "onClick": false,
        "selectOptions": {
            "0": {},
            "1": {},
            "2": {},
            "3": {},
            "4": {},
            "5": {},
            "6": {},
            "7": {},
            "8": {},
            "9": {},
            "10": {},
            "11": {},
            "12": {},
            "13": {},
            "14": {},
            "15": {},
            "16": {},
            "17": {},
            "18": {},
            "19": {},
            "20": {},
            "21": {},
            "22": {},
            "23": {},
            "24": {},
            "25": {},
            "26": {},
            "27": {},
            "28": {},
            "29": {},
            "30": {},
            "31": {},
            "32": {},
            "33": {},
            "34": {},
            "35": {},
            "36": {},
            "37": {},
            "38": {},
            "39": {},
            "jQuery360012274973111227251": {
                "events": {
                    "change": [
                        {
                            "type": "change",
                            "origType": "change",
                            "guid": 2,
                            "namespace": ""
                        }
                    ]
                }
            }
        }
    },
    "element": {},
    "input": {
        "jQuery360012274973111227251": {
            "events": {
                "change": [
                    {
                        "type": "change",
                        "origType": "change",
                        "guid": 2,
                        "namespace": ""
                    }
                ]
            }
        }
    },
    "results": {},
    "resultsList": {},
    "ariaResult": {
        "0": {}
    },
    "resultClassName": "js-autocomplete__result",
    "inputVal": "",
    "typeId": false,
    "searching": false,
    "searchingClass": "autocomplete--searching",
    "dropdownActiveClass": "autocomplete--results-visible",
    "truncateDropdown": false,
    "templateItems": {},
    "templates": [],
    "autocompleteClosed": false
}

So the correct options at least seem to be there in the autocomplete.

Still not able to make the select to work. It doesn't open and when start typing getting the following error.
Uncaught TypeError: element.options.searchData is not a function

Kr,
Patrick

Z-Index doesn't working correctly

Steps:

  • Add, in the same page, two autocomplete select, one under the other.
  • Open the first select

What is does:
It hides the options under the second autocomplete select

Notes:
I have tested with one 'Autocomplete' and under it an 'Autocomplete select'.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.