Keyboard support and more #7
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
+ Added support for Bootstrap .form-control styling (corrected border). + Added support for `tabulation` navigation. + Added focus style for selecting options with newly implemented keyboard navigation functionality.
RENAMED dynamic-selected-option-focus TO dynamic-selected-focus AND placed it appropriately.
+ Added support for Bootstrap .form-control styling (Set DynamicSelect's option = { bootstrapForm: true }).
+ Added support for forward `tabulation` navigation.
+ Added support for backward `tabulation` navigation with `Shift+Tab`.
+ Added support for `Up & Down Arrow keys` navigation.
+ Added support for `forward & backward` search with other keyboard keys
+ Clients can also escape DynamicSelect's options dropdown, using `Esc` (Escape) keyboard button.
+ Clients can also toggle DynamicSelect's options dropdown, using `Space` (Space bar) keyboard button.
+ Client can also escape DynamicSelect's options dropdown, using both:
forward and backward `tabulation` navigation, when there are no more options to iterate through.
+ UNICODE is supported. Hence, by hitting [Alt Gr] + [L] (using Polish Programmers Keyboard)
you can search through options with textContent, where the first letter is: `ł` or `Ł` (This feature is NOT case-sensitive))
You can also perform a backward search to find specific options, by holding `Shift` + `Any UNICODE Key`, keyboard buttons.
NOTE: Most added features work only when the client is focused on the DynamicSelect selection.
Included new options to the Example configuration
Fixed issue where many objects used to change options of one another unintensionally
When multiple dropdowns are open, clicking a new one should: Close all other open dropdowns. and Keep only the clicked dropdown open
…ty. Removed previouslly added support for Bootstrap, and more
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Branch Update: Enhancements, Documentation, Styling Updates, Initial Testing, and Future Considerations for DynamicSelect
Contributor:
Gabriel Książek (McRaZick) | GitHub Profile
Contribution Period:
April 2, 2025 – April 8, 2025 (UTC-0)
Key Enhancements & Modifications:
disabledattribute.idAttribute:The
idattribute has been moved from<selection>to<dynamic-select>, ensuring direct targeting of the primary element. Previously,<dynamic-select>functioned as a wrapper<div>, but it has now been elevated in hierarchy to better define the component structure. This change is crucial because thetabindexattribute primarily operates on the main element, improving keyboard accessibility and interaction.Introduced support for extending custom classes and styles across semantic elements.
new DynamicSelect()now inherits options from the associated<select>element, allowing dynamic modification—such as adding new options or overwriting existing ones.The placeholder will now display in the
<selected>header unless aselectedattribute or option is explicitly defined. In such cases, the specified selected element takes precedence and will be displayed in the<selected>header.Documentation Updates & Newly Added Features:
<select>ElementStyling Updates (SCSS & CSS Enhancements):
DynamicSelect.css&DynamicSelect.scss).disabledattribute applied to<display-element>.<item>options in dropdown selections.<item><selected><dropdown><selection><display-element>Testing & Future Considerations:
Users are no longer dependent on a mouse to interact with
<dynamic-select>, enhancing accessibility.Multiple
<display-element>objects have been tested to ensure no unwanted event bubbling when dropdowns overlap.Performance & Code Improvement Considerations:
Fork Availability:
The fork containing these changes will remain open for those who may find the features useful, even if they are not incorporated into the main project.
Additional comments may be removed from the
.jsscript as long as the newly implemented features are appropriately credited.Advanced Example:
For a more detailed implementation and practical use cases, refer to the advanced examples:
🔗 More Advanced Examples