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 💪👍👍👍
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.👏👏
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!
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.
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
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 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.
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:
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!
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.
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
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
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.
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?
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!!
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
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, 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?
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
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 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?
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
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???
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 ?
Firebase auth is a very basic auth system that doesn't include many features like 2FA, SSO, SAML, etc. If all you need is simple aith then firebase is fine, but if you need more than that then firebase is probably not best.
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.
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 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!
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.
Newly entered into javascript and react world... Great video 👏 keep up this great work 🙏
Good luck with your JavaScript and React learnings!
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.
This is what I have been looking for. Thanks you have our back 🙌
Wow, today i actually needed this functionality in my project, thanks !
You're such a good guy. I LOVE that I can always learn something from your videos.
Thank you! Very lucidly explained. I did it on jsx files, everything worked as I need for my project. Great!
I’ve learned so many things in this little amount of time ! Thank you so much !
As always, great content that make developers improve their knowledge 👏
Amazing tutorial,.. as always to be fair. Loved it!
using it for a few years and now I want to upgrade and I'm happy I did that.
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
Nice!!! Keep producing such a informative video bro🎉
Good stuff using vite instead of CRA! It's so much better in every single way.
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.
Really really needed this. Thank you so much!
Awesome concept and product, great work mate
Great work.. please do more content with typescript
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.
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?
Plz make more videos on making a custom react components like this
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!
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.
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
Awesome.. 🥳🥳🥳 I was needing this
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
Thank you! It's very helpful!!
Hey Kyle, Great video once again, I am just curious how you would implement the scroll functionality when using keys to navigate the ul.
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
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
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.
very good bratan juda yaxhshi
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
This is great, thank you!
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?
You are just too good, as in extremely good...
NGL, this requirement came up for my project this week!
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
Thank you for tNice tutorials very clear and concise tutorial. Look forward to more videos from u
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..
Great video thanks!
Wonderful tutorial, Just a question, why you did not use arrow functions inside the component? there are any points?
hey! Thank you for the video
I have a quick question
Why did transform: 0 25% on the caret made it center in container?
excellent tutorial
It is a great project! Thank you so much
channel, I want that soft to be the sa in other desired channels without having to go there and doing manually.
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.
Amazing! Thanks
Love the TS videos keep it up !
Agreed!
why we use vite instead of normal react? would there will be any problem or something
I challenge you to make a reusable datepicker, modal, carousel or other useful ui component that commonly used using react and typescript
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
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
Would be interesting if you could add a search feature here
Kyle, can we get a learn Typescript in 30 minutes video 🥲
Check Codevolution's video as it covers in 50 mins.
learned a lot, thankss
Thanks Kyle! Can I use this w/ Next.js action servers?
great job💯
jest super simple greatness, good job
Would it be better to create a custom hook for this instead a component?
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
thank you bro
how onblur and clickoutside hook are different?
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?
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
Would love to see a second part where you make this screen reader accessible as well!
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
How do you package something like this so you can use it in a plain javascript project?
Do you have any video on typescript with react context API?
thanks amazing!
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?
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.
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
I was just searching for something like this last night and watched a ton of videos. Most didn't cover what you cover.
@WebDevSimplified What keyboard do you use?
Is it searchable and clearable? And does multiselect selections area have scrollbar if there are many options selected?
Can we implement a selectAll feature to this?
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
Hello there! This custom component supports async calls? I need to create a component that performs well with long data
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???
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?
Hey thanks for the video is it possible to add in a search 🔍
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 ?
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
thats a good sign imo
One question, if i want to do this using material ui select, can we do this on that?
hi ~ WDS
what are the reasons for choosing PropelAuth rather than Firebase Auth?
Firebase auth is a very basic auth system that doesn't include many features like 2FA, SSO, SAML, etc. If all you need is simple aith then firebase is fine, but if you need more than that then firebase is probably not best.
@@WebDevSimplified thanks
How about the performance of typescript within react?
how long does it take for a junior to write such code?
22:30 how when he enter a save the code structure change like that someone reply please
Brilliant
how can i use this as a component in my react.js project?
why not use portal for options?