Anjan Dutta
Reusable Custom Select Element in Javascript
Reusable Custom Select Element in Javascript
It all started here
In my previous post about the custom select component, I explained how to create a custom select box from the scratch using vanilla HTML, CSS and javascript.
Well, life was good until I got one of my visitors commenting in my previous article.
He suggested to enhance the code into a reusable one.
And I thought
It got me into thinking, yeah, that makes a lot of sense. I mean what’s the point of putting all those efforts in creating a select element which is not even reusable? Duh!
So, once again I put my coding gloves on. ( And started writing something sensible this time, finally!)
So, the first thought came to my mind while thinking of a reusable component was to create a common library. Sounds heavy right? I was thinking the same at first.
Wait, it’s not hard
Yay! you created your first library! To my surprise, I have enjoyed writing it even more than the previous one. It’s compact, pretty easy to maintain and much more readable.
The idea was to remove all external dependencies and combine everything into one file. By everything I mean HTML, CSS and Javascript.
You might or might not have noticed that the title says only Javascript. Yes, that’s pretty much what I needed to make my reusable custom select element.
I will explain in parts, so don’t panic at first.
1<html>2 <head>3 <script type="text/javascript" src="./custom-select.js"></script>4 </head>5 <body>6 <div>7 <custom-select options='[{"text":"One", "value":1},{"text":"Two", "value":2}]'></custom-select>8 </div>9 <div style="position: absolute; top: 100px;">10 <custom-select options='[{"text":"Three", "value":3},{"text":"Four", "value":4}]'></custom-select>11 </div>12 </body>13</html>How to use the custom element
It can be any page you want to use the custom select element. At the top, I have included the source file custom-select.js.
In the body section, I have used my cool custom tags,
Those who have worked in Angular, React or Vue is familiar to custom components.
For others, I have registered my custom element here and by writing these tags (
I have passed an attribute named options, which takes a JSON array of items.
Each array item has two properties text and value. The text property is used to display the option name in the dropdown. The value property is used to pass the option value for internal usage. Clear enough? I said so. Now, let’s take a look at the JS part.
1class CustomSelect extends HTMLElement {2
3 constructor() {4 super();5
6 let isOpen = false;7 let shadow = this.attachShadow({mode: 'open'});8
9 this.toggleSelf = function (el) {10 isOpen = !isOpen;11
12 if (isOpen) {13 el.style.visibility = 'visible';14 el.focus();15 } else {16 el.blur();17 el.style.visibility = 'hidden';18 }19 }20
21 this.selected = function (opt) {22 valueText.innerHTML = opt.text;23 hiddenInput.val = opt.value;24 this.toggleSelf(this.selectContainer);25 }26
27 let wrapper = document.createElement('div');28 wrapper.setAttribute('class', 'wrapper');29
30 let hiddenInput = document.createElement('input');31 hiddenInput.setAttribute('type', 'hidden');32 hiddenInput.setAttribute('id', 'selectedValue');33
34 let displayValue = document.createElement('div');35 displayValue.setAttribute('class', 'display-value');36 displayValue.addEventListener('click', ()=> {37 this.toggleSelf(this.selectContainer);38 });39
40 let valueText = document.createElement('span');41 valueText.setAttribute('class', 'value-text');42 valueText.innerHTML = 'Select';43 44 let arrowIconWrapper = document.createElement('span');45 arrowIconWrapper.setAttribute('class', 'arrow arrow-down');46
47 this.selectContainer = document.createElement('ul');48 this.selectContainer.setAttribute('class', 'select-container');49 this.selectContainer.style.visibility = 'hidden';50 this.selectContainer.addEventListener('onblur', function() {51 this.toggleSelf(this.selectContainer);52 });53
54 let style = document.createElement('style');55 style.textContent = '.wrapper{position:relative;}.display-value{height:39px;width:211px;display:flex;'+56 'position:absolute;border:2px solid #666}.value-text{display:flex;padding-left:10px;'+57 'font-family:sans-serif;align-items:center;color:#666}'+58 '.arrow{left:190px;top:17px;position:absolute}.arrow.arrow-up{width:0;height:0;'+59 'border-left:6px solid transparent;border-right:6px solid transparent;'+60 'border-bottom:6px solid #000}.arrow.arrow-down{width:0;height:0;'+61 'border-left:6px solid transparent;border-right:6px solid transparent;'+62 'border-top:6px solid #000}.select-container{width:211px;padding:0;position:absolute;'+63 'visibility:hidden;margin:0;height:fit-content;border:2px solid #333;background-color:#fff;'+64 'list-style-type:none;display:block}.select-container:focus{outline:0}.select-option{'+65 'display:none;height:40px;display:flex;padding-left:10px;font-family:sans-serif;'+66 'align-items:center;color:#666}.select-option:hover{background-color:#eee}';67
68 shadow.appendChild(style);69 shadow.appendChild(wrapper);70 wrapper.appendChild(hiddenInput);71 wrapper.appendChild(displayValue);72 displayValue.appendChild(valueText);73 displayValue.appendChild(arrowIconWrapper);74 wrapper.appendChild(this.selectContainer);75 }76
77 connectedCallback() {78
79 if (this.hasAttribute('options')) {80 let options = this.getAttribute('options');81 options = JSON.parse(options);82
83 if (Array.isArray(options) && options.length > 0) {84 options.forEach((option) => {85 86 let optionElement = document.createElement('li');87 optionElement.setAttribute('class', 'select-option');88 optionElement.innerHTML = option.text;89 optionElement.addEventListener('click', ()=>{90 this.selected(option);91 });92
93 this.selectContainer.appendChild(optionElement);94 });95 }96 }97 }98}99
100customElements.define('custom-select', CustomSelect);As you can see, I have made a class (CustomSelect) for the component. And at the bottom of the file, I have passed the class reference to create my custom element.
Class Constructor
The class constructor contains most of the code as this block handles the individual element creation and event binding to elements.
The constructor can be broken into 3 parts. The first part contains individual element creation and function definitions that handle click and select events.
The second part is minified CSS from the previous article (No change). Minified to reduce the number of lines.
The third part is the glue that attaches all the elements in an order to generate the final component.
connectedCallback
But, that’s not all. We have another function called connectedCallback.
This section handles the attribute value that we pass and creates options for our select input. You may ask, why we are not handling this in the constructor. That is because the constructor renders very fast and returns without reading the given attribute.
Conclusion
Importing this class file and using as per the above example will work fine. You can make customizations to make it even better. Or comment below if you have any more suggestion to enhance it. Thanks for reading my article.
Your feedback is valuable and encouraging.
Happy coding.