I created something similar for my organization some few months ago since already made libraries couldn't serve our needs and they were a little difficult to overwrite or should I say hack into.. It had option to select all options, clear all options, scroll any selected option into view, an input field at the bottom of the list to add one extra option to the list with the ability to edit that one option, plus all the accessibility as well.. GREAT WORK KYLE 💪👍👍👍
Learned much more through this tutorial than the hours of online courses i purchased. Almost feel guilty for being able to watch this for free. Thanks King!
What a wonderful video.. my knowledge of Typescript is low but I was able to follow your tutorial with alot of ease because of how well you teach. Keep up the great work.👏👏
Super helpful. I always reach for libraries for this kind of stuff so I had no idea how one would even begin implementing something like this. Your explanation was extremely concise and clear.
Very interesting! 👍 But for resume i suggest few things. 1. Apply some sort order to the component's props (it is hard to read mix of func and props ) 2. To use " double quotes only for attribute's values (remove them from JS) 3. Move event handler logic from JSX to the separate event handler function.
I've had to make a similar component but I needed to add links in each selection and links for adding new items at the bottom without js and it took me 2 hrs to make it work without bugs
I think there is a problem with arrowUp/Down handler when options have enough elements for scroll to appear. Probably it would be better to scroll to hightlighed element.
Thank you so much Kyle!!! How can I get only the Id in an array in order to save it in a Database? I’ve been trying but I had haven a lot of errors. Can you help me please? Greetings from Dominican Republic
Thanks for the video dude! Can you do one for dropdown menus that open in a portal (but still position themselves under the dropdown trigger)? Please please please!
This is great and thank you for showcasing some accessibility features. I love your vids and watch almost all of them when they come out. Keep it up!. However, this is not WCAG 2.0 (AA or AAA) compliant. You are neglecting the proper aria attributes, color contrast requirements, and several other criteria. I get that you are trying to teach, but someone could take this as being fully accessible and just using it in their code only to realize that it is not.
Hello Kyle! Nice tutorial as always. I relly like this dropdown-component I have a question. Why did you add a ref and an eventlistener to listen for keystrokes and not the onKeyDown-attribute to the div? Example:
damn that was so awesome it was just going on and on! need to think of something useful and develop something around it so that i can add it in my github and resume
Could you add the keyboard logic directly to the container div onKeyDown prop, since it has tabIndex which means it can get focused? It should run the logic when focused without having to check if e.target is equal to the ref.current. This would remove the need for useRef as well. And the logic won't be run if you've blurred from the div.
Is implementing .option.highlighted with simple .option:hover { bg-color: #111} in the CSS file somehow wrong? I mean I'm new but why should we make it more complex by using states onMouseEnter and implementing functions to handle it?
Hi, thanks for the video. I'm having an issue where the multiselect does not work on both my own code and the provided github code. I'm very new with typescript, but i'm suspecting the onChange=[...value, option] is invoked as null . Did I do something wrong?
Great tutorial Kyle!! I just loved it. I do have a question... Has anyone tried to implement this component with react hook form? I am testing now a way to do that but the simple way is not working. I'm not sure if I need to type the native select component and hide it afterwards, it would be just to spread the value of the register function that the library provides. If anyone has an idea I would appreciate your comments!!
in select option function and in comparision of value and option , this always returns falsy value , because it refers to the addrese of the storage location in memory, so i think that should be converted to JSON.stringify(option)!==JSON.stringify(value) , is this true???
that is awesome, done such thing by myself on work,, but using 'downshift' lib... it was really hard, im middle frontend-developer.... and i was need to create a select that can be multi/single select, search and also you can add some new option when typing somethin in it.... and if it is a multi select - must show tags with close buttons placed left to input element (which is select in multi mod...) gosh))) and also i was need to resize my input element when typing text up to text size))) there i took react-input-autosize lib and reedit it to functional component.... to use it (because project is ui-kit for local usage in other projects of our company) ... it was a challange... cause im about creating new react-redux connections... fetching stuff and mapping collections and was never doing such a lot of stuff like creating multifunctional component for reusage)) thx for the video... wow..
Thanks for the video. But after assigning keyboard listener, and if the list of items are large, on pressing keydown, the list would not scroll, just the highlighted Index will go down. So how to make the list scroll and also while setting the highList Index
hey , how this thing is working, can someone please explain ? value.includes(option) value is an array of objects and option is an object, so it shouldn't work right ?
Thank you so much for this vid, Kyle! There is just one thing I'd ask; you seem to prefer types exclusively over interfaces, is there a reason for that or just a preference?
all the different elents together in a language that is universal. I've seen plenty of DAW tutorials being new, but tNice tutorials is by far the best so
Sir , 1 selfish request , 1 video on Reactjs (plain) + CSS Which is perfect for resume to impress recruiter. Please 🙏🏽 make 1 video and please explain everything css also
Hi, I am a self-taught frontend developer and wondering that question : If there are no-code websites like wordpress and wix, why people need frontend developer ? They can do same things via wordpress instead of tons of code
Hey Kyle, If we wanna give dynamic/optional styling on an element the video shows to implement it with backticks but can't we use CLSX to give styling on an element on condition?
Can I use this example on production? I think it can be optimized somehow. Would be nice to see video on this theme! Because this component Select.tsx looks very big and mess. Or it is normal?
21:16 Is there a special reason why you are using `typeof options[0]` instead of the `SelectOption` interface for the type of the state? Edit: Never mind. You changed that later in the video :D
do you think this is a good level to master stuff for a junior job? I have been a "front end dev" for a year and a half but have no code reviews and just build websites with gatsby from figma designs. I really want to advance my career and I am wondering what level this is considered. thank you for your lessons
bro great work... not just for this but for all the stuff .... learned a lot
I created something similar for my organization some few months ago since already made libraries couldn't serve our needs and they were a little difficult to overwrite or should I say hack into.. It had option to select all options, clear all options, scroll any selected option into view, an input field at the bottom of the list to add one extra option to the list with the ability to edit that one option, plus all the accessibility as well.. GREAT WORK KYLE 💪👍👍👍
An option to select or deselect all, that's a pretty good idea.
Learned much more through this tutorial than the hours of online courses i purchased. Almost feel guilty for being able to watch this for free. Thanks King!
Don't feel guilty, send him a donation.
What a wonderful video.. my knowledge of Typescript is low but I was able to follow your tutorial with alot of ease because of how well you teach. Keep up the great work.👏👏
Super helpful. I always reach for libraries for this kind of stuff so I had no idea how one would even begin implementing something like this. Your explanation was extremely concise and clear.
Newly entered into javascript and react world... Great video 👏 keep up this great work 🙏
Good luck with your JavaScript and React learnings!
Very interesting! 👍 But for resume i suggest few things. 1. Apply some sort order to the component's props (it is hard to read mix of func and props ) 2. To use " double quotes only for attribute's values (remove them from JS) 3. Move event handler logic from JSX to the separate event handler function.
Kyle, can we get a learn Typescript in 30 minutes video 🥲
Check Codevolution's video as it covers in 50 mins.
Super awesome man. You helped me by solving two bugs.... The keyboard accessibility was just the best!!!
Gold video, i used that instead react-select npm, great work!
You're such a good guy. I LOVE that I can always learn something from your videos.
Wow, today i actually needed this functionality in my project, thanks !
I've had to make a similar component but I needed to add links in each selection and links for adding new items at the bottom without js and it took me 2 hrs to make it work without bugs
I’ve learned so many things in this little amount of time ! Thank you so much !
using it for a few years and now I want to upgrade and I'm happy I did that.
I think there is a problem with arrowUp/Down handler when options have enough elements for scroll to appear. Probably it would be better to scroll to hightlighed element.
Thank you! Very lucidly explained. I did it on jsx files, everything worked as I need for my project. Great!
This is what I have been looking for. Thanks you have our back 🙌
Thank you so much Kyle!!! How can I get only the Id in an array in order to save it in a Database?
I’ve been trying but I had haven a lot of errors.
Can you help me please?
Greetings from Dominican Republic
As always, great content that make developers improve their knowledge 👏
Thanks for the video dude! Can you do one for dropdown menus that open in a portal (but still position themselves under the dropdown trigger)? Please please please!
This is great and thank you for showcasing some accessibility features. I love your vids and watch almost all of them when they come out. Keep it up!.
However, this is not WCAG 2.0 (AA or AAA) compliant. You are neglecting the proper aria attributes, color contrast requirements, and several other criteria. I get that you are trying to teach, but someone could take this as being fully accessible and just using it in their code only to realize that it is not.
Amazing tutorial,.. as always to be fair. Loved it!
Hey, I'm just starting to get into making soft and tNice tutorials 17 minute video helped a LOT MORE than those one hour long tutorials out
Hello Kyle!
Nice tutorial as always. I relly like this dropdown-component
I have a question. Why did you add a ref and an eventlistener to listen for keystrokes and not the onKeyDown-attribute to the div?
Example:
That would have been a lot smarter. Not sure what I was thinking.
@@WebDevSimplified What keyboard do you use?
damn that was so awesome it was just going on and on!
need to think of something useful and develop something around it so that i can add it in my github and resume
Could you add the keyboard logic directly to the container div onKeyDown prop, since it has tabIndex which means it can get focused? It should run the logic when focused without having to check if e.target is equal to the ref.current. This would remove the need for useRef as well. And the logic won't be run if you've blurred from the div.
Good stuff using vite instead of CRA! It's so much better in every single way.
Thanks for this tutorial.
Would really want to see more react native stuffs. And can you try notion and Google sheets as db.
Thanks as always
Hey Kyle, Great video once again, I am just curious how you would implement the scroll functionality when using keys to navigate the ul.
channel, I want that soft to be the sa in other desired channels without having to go there and doing manually.
Plz make more videos on making a custom react components like this
I want to make a zoom slider component for use any project but I wonder how I ensure css consistency? I want it not to be affected another css rules.
how onblur and clickoutside hook are different?
Is implementing .option.highlighted with simple .option:hover { bg-color: #111} in the CSS file somehow wrong? I mean I'm new but why should we make it more complex by using states onMouseEnter and implementing functions to handle it?
it was done for keyboard accessibility
hey! Thank you for the video
I have a quick question
Why did transform: 0 25% on the caret made it center in container?
I challenge you to make a reusable datepicker, modal, carousel or other useful ui component that commonly used using react and typescript
Hi, thanks for the video. I'm having an issue where the multiselect does not work on both my own code and the provided github code. I'm very new with typescript, but i'm suspecting the onChange=[...value, option] is invoked as null . Did I do something wrong?
Would be interesting if you could add a search feature here
Great tutorial Kyle!! I just loved it. I do have a question... Has anyone tried to implement this component with react hook form? I am testing now a way to do that but the simple way is not working. I'm not sure if I need to type the native select component and hide it afterwards, it would be just to spread the value of the register function that the library provides. If anyone has an idea I would appreciate your comments!!
great video... but wouldn't it be better to use hover effect instead of highlighted logic that you used?
it was done for keyboard accessibility
in select option function and in comparision of value and option , this always returns falsy value , because it refers to the addrese of the storage location in memory, so i think that should be converted to JSON.stringify(option)!==JSON.stringify(value) , is this true???
that is awesome, done such thing by myself on work,, but using 'downshift' lib... it was really hard, im middle frontend-developer.... and i was need to create a select that can be multi/single select, search and also you can add some new option when typing somethin in it.... and if it is a multi select - must show tags with close buttons placed left to input element (which is select in multi mod...) gosh))) and also i was need to resize my input element when typing text up to text size))) there i took react-input-autosize lib and reedit it to functional component.... to use it (because project is ui-kit for local usage in other projects of our company) ... it was a challange... cause im about creating new react-redux connections... fetching stuff and mapping collections and was never doing such a lot of stuff like creating multifunctional component for reusage)) thx for the video... wow..
NGL, this requirement came up for my project this week!
Great work.. please do more content with typescript
why we use vite instead of normal react? would there will be any problem or something
Thanks for the video. But after assigning keyboard listener, and if the list of items are large, on pressing keydown, the list would not scroll, just the highlighted Index will go down. So how to make the list scroll and also while setting the highList Index
Really really needed this. Thank you so much!
hey , how this thing is working, can someone please explain ?
value.includes(option)
value is an array of objects and option is an object, so it shouldn't work right ?
Awesome concept and product, great work mate
Thank you so much for this vid, Kyle! There is just one thing I'd ask; you seem to prefer types exclusively over interfaces, is there a reason for that or just a preference?
Also wondering about it
all the different elents together in a language that is universal. I've seen plenty of DAW tutorials being new, but tNice tutorials is by far the best so
You are just too good, as in extremely good...
I was just searching for something like this last night and watched a ton of videos. Most didn't cover what you cover.
Where did the caret come from? I dont see anything representing it in the html besides the empty div and the css does nothing for me
Nice!!! Keep producing such a informative video bro🎉
Thank you for tNice tutorials very clear and concise tutorial. Look forward to more videos from u
Thanks Kyle! Can I use this w/ Next.js action servers?
Sir , 1 selfish request ,
1 video on Reactjs (plain) + CSS
Which is perfect for resume to impress recruiter.
Please 🙏🏽 make 1 video and please explain everything css also
Hi, I am a self-taught frontend developer and wondering that question : If there are no-code websites like wordpress and wix, why people need frontend developer ? They can do same things via wordpress instead of tons of code
the answer is simple : you can't create websites like wordpress using wordpress ;)
For static websites and simple crud, probably yes. Complex web app ? not even close 🙂
well those websites are quite good at creating the HTML and CSS - but JS not so much (so the less static a website is the more you need a real dev)
As complexity scales, it's going to be more and more challenging to use an "out of the box" solution like wordpress or wix
Hey Kyle, If we wanna give dynamic/optional styling on an element the video shows to implement it with backticks but can't we use CLSX to give styling on an element on condition?
Would love to see a second part where you make this screen reader accessible as well!
Wonderful tutorial, Just a question, why you did not use arrow functions inside the component? there are any points?
Is it searchable and clearable? And does multiselect selections area have scrollbar if there are many options selected?
22:30 how when he enter a save the code structure change like that someone reply please
Thank you! It's very helpful!!
Awesome.. 🥳🥳🥳 I was needing this
It is a great project! Thank you so much
Hello there! This custom component supports async calls? I need to create a component that performs well with long data
Nice tutorial ... I've got a problem ... when I first used soft soft , there were so tutorial such as Slayer , wNice tutorialch disappeared after I
Hi thank you for the video. At 18:35 why is it styles.show instead of styles.options.show?
thank you bro
This is great, thank you!
Can I use this example on production? I think it can be optimized somehow. Would be nice to see video on this theme! Because this component Select.tsx looks very big and mess. Or it is normal?
Hey thanks for the video is it possible to add in a search 🔍
learned a lot, thankss
Would it be better to create a custom hook for this instead a component?
How do you package something like this so you can use it in a plain javascript project?
21:16 Is there a special reason why you are using `typeof options[0]` instead of the `SelectOption` interface for the type of the state?
Edit: Never mind. You changed that later in the video :D
Can we implement a selectAll feature to this?
@WebDevSimplified What keyboard do you use?
Do you have any video on typescript with react context API?
excellent tutorial
thanks amazing!
great job💯
do you think this is a good level to master stuff for a junior job? I have been a "front end dev" for a year and a half but have no code reviews and just build websites with gatsby from figma designs. I really want to advance my career and I am wondering what level this is considered. thank you for your lessons
Great video thanks!
Love the TS videos keep it up !
Agreed!
Great lesson thx mate ! I'm learning web dev and I'm digging React since a week. Why would you choose modules.css instead of Styled components ?
Styled components is an additional library. We don't need it for such small projects. So he uses this
It's just a matter of preference, i myself prefeer css modules over styled components.
how can i use this as a component in my react.js project?
Bro please tell paragraph heading active color change while scrolling in html page in javascript
Amazing! Thanks
How about the performance of typescript within react?
One question, if i want to do this using material ui select, can we do this on that?
how long does it take for a junior to write such code?
Hello sir. Please how were you able to dive deep into js, Are there any hints for us?
I recommend a course by FrontendMasters called the "Hard Parts" of JS
why not use portal for options?
anyone. I appreciate it!!
How to add search option to dropdown
thats a good sign imo