Designing with Tailwind CSS: Making the Dropdown Interactive

okay so right now this drop-down looks great and everything is sort of where it's supposed to be but when we actually click the Avatar the drop-down doesn't open or close it's just permanently open so in this lesson let's walk through using a little bit of tail end and a little bit of view to actually make this drop sound work the way that you'd expect so the first thing that I'm going to do is add a little bit of state to keep track of whether or not this drop-down should be open so we're just going to add an is open property and why don't we send it to false by defaults next let's hide the actual drop-down area whenever is open is not set to true so I'm just gonna add a V if here and have this set to is open so whenever it is open is true this is going to be displayed whenever it is open it's false it's not gonna be displayed it's now you can see the drop-down did actually vanish and if we were to switch this to true it should default to being open so we do want it closed by default so let's switch this back to false and next let's make it open when we click the button so we're going to add a click handler to the button so we'll just say and click and then we'll just say is open is equal to not is open so we'll have this button toggle that anytime that you click it so now we should have this sort of working so if we click this it opens and if we click it again it closes so we're off to a good start here now the next thing that you probably want to happen with a drop-down like this is you want to be able to click outside of the drop-down and have the drop-down actually close right now if we click outside and nothing happens we can just like select texts and stuff like that but the dropdown stays open now there are a couple different ways we could solve this problem one of them is a lot more JavaScript heavy than the others so I'm gonna focus on an approach that's a little simpler and relies more on working with the DOM and CSS and stuff like that so what we want to happen Rae's we're gonna be able to click outside of this drop-down and have this closed so we need some sort of click Handler on some element to trigger closing the drop down so what if we added an element that filled the entire screen but sat behind this drop down so whenever you clicked outside of the drop down you were clicking this sort of like fullscreen overlay that closed the element I'll show you kinda what I mean so what I'm gonna do is I'm going to start by just I'm adding a button now because we want this to be clickable the semantically correct thing to do here's use a button element not just a div with a click handler or anything like that so I'm gonna add a button and what we're gonna do is we're going to add a click handler to this button that says whenever you click this is open is gonna be set to false we don't want it to toggle we just want it to close okay so now you can see that we do have you know something happening that's affecting the layout here so let's use some telland utilities to sort of make this button act as like sort of a full-screen overlay so to start let's just add a class attribute here and you might think to start by adding a position:absolute right so that we can position this element sort of wherever we want now we could do something like top 0 right 0 bottom 0 left 0 and you think ok maybe this is gonna cover the entire screen now let's give this a background color like BG red 500 or something so we can see it and you can see it's still actually not showing up so in this case let's also add a height of full and a width of full and see if that works ok so now we do have I'm this square showing up now the thing that you might be surprised by at first is that this button is only covering the space taken up by the Avatar it's not sort of filling the whole screen and this comes back to what we talked about before where because we have added position relative to this div it's sort of acting as a position reference so any elements nested inside the Hat position:absolute are going to be positioned relative to the nearest positioned ancestor so if we want to completely sort of break out of this container and we can use position fixed which makes it always relative to the viewport so now you can see we have this giant red square that covers the entire screen now we don't want this always visible right we only want this visible when the dropdown is open so just like this div we can add a VF to this as well and we could say V if is open show this square otherwise don't now if we go ahead and click this button we should see that big red a rectangle show up again and it does and if we click the red rectangle it closes now we don't actually want this to be this ugly right a rectangle of course because that's not what you'd want to real UI to look like but maybe just so we can sort of see the effect of what we're doing here let's keep a little bit of a color so why don't we do something like maybe a BG black but give it an opacity of say 50 see what that looks like at 50% so if we click this button and everything kind of dims except the drop-down you may like this effect you may not like this effect and we could of course make this totally transparent but I think for the purposes of sort of understanding what we're doing in this lesson it's kind of nice to have some sort of visual representation of this area so I'm gonna keep it this color now one thing you might be noticing is that we're getting like a pointer cursor when we hover over the background which may be a little bit unexpected so I'm gonna switch this to cursor default instead of the pointer cursor and that way it doesn't actually look like you're trying to click on a button even though that's how its implemented so now you see we do just get the regular cursor but we do get like the pointer cursor on the links and stuff like that which i think is more like i'd expect this to behave but you might notice that when we hover over the Avatar button we still have the default cursor now not the pointer cursor like you might expect and that's because this fullscreen overlay is actually covering that avatar now maybe this is fine maybe you don't care but if you did want this button to sort of pop through and be part of this layer we can do then using z-index utilities so I'm going to do is I'm just gonna head over to the actual button with the avatar in it and to start I'm just going to try adding a z-index anything above zero the first step until one by default is Z 10 so if we save this you might expect that now okay this does show up on top of the background but you'll see that it doesn't and the reason for that is that you can't apply a Z index to any element that has position of static which is the default position of elements in the browser and so if we wanted these Z index to actually work here we're gonna need to change the position to something else now the best option for us in this case is relative because that means the element is still kind of rendered exactly as it would be if it was positioned static but now it's actually allowed to be affected by Z index so you can see that when I saved this button did pop up and appear on top of the background so if I click this you can see the button is still there and when I hover the mouse over it the cursor does change to the pointer cursor ok another little detail that might be worth fixing here is because we've implemented this background as a button that means that we can tab to it so you can't really see this but when I hit shift tab in this case to tap back right now the button actually has focus even though that's not visible in any way so that means I can hit space and close it which is kind of weird not really the behavior you'd expect I think I'd like to be able to tab from this button directly to one of those links not have a step in between um so what I'm gonna do is I'm gonna add a tab index of negative one to this button set it's inaccessible from the keyboard and now if we were to go ahead and open this drop-down want a hit tab it goes directly to the link and directly back to the button so we sort of skip that background section now one final piece of little cleanup that I'd like to do we related to these classes you remember here I introduced this top 0 right 0 bottom 0 left 0 this can be a little cumbersome to type out all four of these utilities when really you just want to set all of the sides to 0 so tail one has a shorthand for this using the inset utility and this is based on an upcoming feature of CSS where they're going to be adding a native inset property that works as a shorthand for these four properties so we can just say inset 0 and then we don't need any of this stuff and this just does the exact same thing so you'll still see that when I click this button we get that full screen overlay I'm now just like margins and padding's and stuff until and if you only wanted to do this in one direction you could do in set X 0 or in set y 0 which again is just sort of a long form for in set 0 but this is the left and right directions and this is the top and bottom directions now in our case again just in Scent 0 is totally fine so I'm just gonna switch it back to that now one final thing in terms of the behavior of this component you might have been saying to yourself after we made this button not keyboard accessible by adding this tab index you might I'm thinking whoa whoa we need to be able to close this thing with the keyboard somehow that's inaccessible and that's true so we should add a way to make it possible to close this drop-down from the keyboard now I think the most conventional what to do that though is by hitting the Escape key not by like tabbing to some invisible button the background and hitting space so this is not two unrelated at all this is just gonna be like a totally JavaScript view thing but I thought just for completionists sake I'll add this in here for anyone that's interested so let's quickly walk through how to set this up so that when we hit escape this will actually close so I'm going to do is I'm going to add a created hook to the view component and in here we're going to create an event listener function that's going to handle any escape key presses so I'm going to call this handle escape and it's gonna receive a keyboard event and then the first thing we're gonna do is we're gonna check if the key that was pressed is the escape key or not to support other browsers we also have to check if it could be actually the full word escape not just ESC if it's either of those then we want to say is open should be false so anytime you hit the Escape key we're going to close this drop down now all we need to do is actually add this event listener to the window so I'm gonna say documents don't add event listener now we're going to listen for the key down events and we're gonna add our handle escape listener and then to make sure that we clean up after ourselves I'm going to listen for views destroyed hook or that before destroy hook doesn't really matter in this case and then I'm just gonna make sure that whenever this component is sort of torn down that's we remove the event listener so I'm gonna say remove event listener key down and we're going to remove that same event listener so again really simple all we're doing is adding an event listener to the document anytime a key is pressed we're going to run this function if it's the escape key we're going to make sure to close the drop-down and we're gonna make sure to remove that event listener to prevent any memory leaks or anything anytime this component is destroyed so now with any luck if we open this I should be able to hit escape on the keyboard and yep it closes

Channel: Adam Wathan

Views: 18,623

Rating: 4.9771428 out of 5

Keywords:

Id: If6XdbBQqmY

Length: 10min 26sec (626 seconds)

Published: Tue Oct 01 2019