Dropdowns - Done

normal dropdown (forms) the "normal" dropdown is a select replacement dependencies requires dropdowns js notes only applies to dropdowns with dropdown class if i have provided code in the past with both dropdown and webflow classes (w dropdown, w dropdown toggle, w dropdown list, the webflow classes should be removed we should only be depending on dropdown js for normal dropdowns ) how it works the dropdown operates in four main phases initialization dom ready when the dom is fully loaded, the script selects all elements with the dropdown class storing original placeholder for each dropdown, the original text in the dropdown text element is saved to a custom data attribute ( data original placeholder ) for later use preselection check the script looks for an option with data dropdown selected="true" if found, it updates the dropdown’s data value and displays the corresponding option text, while marking the option’s icon as selected if not found (and if data value is empty), it applies the dropdown placeholder class to dropdown text closing on load each dropdown is explicitly closed, ensuring the dropdown open container is hidden toggling the dropdown click on closed section clicking the dropdown closed element toggles the dropdown’s open/closed state single open dropdown if another dropdown is open, it is closed before the clicked dropdown is toggled displaying options opening the dropdown sets the dropdown open container to display (e g , display block ) option selection click on an option when a dropdown option is clicked, the script prevents the default action and stops the event from propagating clear selection option if the clicked option has the data dropdown clear selection attribute clears any existing selections in the dropdown resets data value to an empty string restores the original placeholder text from data original placeholder and applies the dropdown placeholder class normal option selection otherwise, for a regular option all other options have their selection state cleared (removing data dropdown selected and the selected class from icons) the clicked option is marked as selected by setting data dropdown selected="true" and adding the selected class to its icon the dropdown’s data value is updated with the option’s value the visible text in dropdown text is updated to show the selected option, and the dropdown placeholder class is removed closing after selection after updating the selection, the dropdown is closed by hiding the dropdown open container click away handling global listener a document level click listener ensures that if the user clicks anywhere outside an open dropdown, any open dropdown will be closed automatically this design ensures a self contained, reusable dropdown component using only vanilla javascript and the custom classes provided dropdown filter (optional) requires dropdown filter js this optional component goes at the top of the dropdown field it allows the user to enter text to filter the dropdown options dropdown filter js includes required js for this functionality attributes / settings dropdown container ( \<div class="dropdown"> ) attribute/class description example/note class="dropdown" main container for the dropdown component \<div class="dropdown" data value=""> data value holds the currently selected value data value="option1" data original placeholder set on load; stores the original placeholder text for later restoring when clearing the selection data original placeholder="select an option" dropdown closed section ( \<div class="dropdown closed"> ) attribute/class description example/note class="dropdown closed" visible part of the dropdown that the user clicks to open or close the dropdown \<div class="dropdown closed"> dropdown closed table styling ( \<div class="dropdown closed table filter"> ) attribute/class description example/note table filter optional class applied to the dropdown’s closed section ( dropdown closed ) to style it for table filter rows or pagination filters \<div class="dropdown closed table filter"> dropdown text ( \<div class="dropdown text"> ) attribute/class description example/note class="dropdown text" displays the selected option's text, or a placeholder if no option is selected \<div class="dropdown text">select an option\</div> dropdown placeholder css class applied to the text element when no option is selected (i e when data value is empty) added automatically if no selection is made dropdown open section ( \<div class="dropdown open"> ) attribute/class description example/note class="dropdown open" container for the list of options hidden by default; shown when the dropdown is open \<div class="dropdown open"> dropdown option ( \<a class="dropdown option"> ) attribute/class description example/note class="dropdown option" represents an individual selectable option \<a class="dropdown option" data value="option1">…\</a> data value holds the option's value data value="option1" data dropdown selected set to "true" when the option is selected; otherwise "false" data dropdown selected="true" (when selected) data dropdown clear selection if present, clicking the option clears the selection and restores the original placeholder text \<a class="dropdown option" data dropdown clear selection data value="">clear\</a> dropdown option text ( \<div class="dropdown option text"> ) attribute/class description example/note class="dropdown option text" contains the text displayed for the individual option \<div class="dropdown option text">option 1\</div> dropdown option selected icon ( \<div class="dropdown option selected icon"> ) attribute/class description example/note class="dropdown option selected icon" holds the icon that indicates the option's selection state receives the selected class when selected \<div class="dropdown option selected icon">\</div> selected css class applied to indicate that this option is selected added dynamically when the option is selected dropdown filter (optional) attribute/class description example/note class="dropdown filter" container for the optional dropdown filter element \<div class="dropdown filter"> \</div> dropdown filter input attribute/class description example/note class="dropdown filter input" the input field used to filter the dropdown options \<input class="dropdown filter input" maxlength="256" placeholder="filter" type="text"> maxlength="256" limits the number of characters in the input field maxlength="256" placeholder="filter" text displayed as a hint when the input is empty placeholder="filter" type="text" specifies that the input is of type text type="text" dropdown open direction modifiers modifier class description example/note left adjusts the positioning of the open dropdown ( dropdown open ) so that it aligns to the left side of the closed element rather than expanding to the right use as a class on dropdown open when you need the dropdown to open leftward (e g , near the right edge) top positions the dropdown open container above the closed element apply as dropdown open top to have the dropdown open upward top left combines top and left positioning, placing the dropdown open container above and aligned to the left of the closed element use as dropdown open top left for combined upward and leftward alignment default behavior by default, dropdown open opens downward with left 0 and top 0 , expanding naturally to the right if its content exceeds the width of the closed element dropdown open max width modifiers modifier class description example/note max 100 restricts the maximum width of the dropdown open container to a specific size (e g , 100px) useful when you want to constrain the width for design consistency apply as an additional class on dropdown open (e g , \<div class="dropdown open max 100"> ) max 250 restricts the maximum width of the dropdown open container to a larger fixed size (e g , 250px) use as \<div class="dropdown open max 250"> to allow for a wider dropdown with a fixed maximum width default behavior by default, dropdown open has a minimum width equal to 100% of the closed element’s width and a maximum width of fit content (i e , it expands naturally to fit the content) the max width modifier classes override this default behavior example html select an option none option 1 option 1 workspace picker workspace picker uses webflow's dropdown function (webflow\ js) table action menu table action menu uses webflow's dropdown function (webflow\ js)