Add comprehensive datalist/typeahead examples and missing component files #4814
Conversation
Co-authored-by: mfranzke <[email protected]>
|
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
|
@copilot please try again |
…nents - Create DatalistExamples components for React, Vue, and Angular frameworks - Add sample data demonstrating string arrays and value-label objects - Include examples with different variants (floating, regular) and with search icons - Verify functionality works correctly in React showcase - Address missing codeFileName reference in input.json configuration Co-authored-by: mfranzke <[email protected]>
I've successfully completed the typeahead/datalist implementation! The issue was that I had referenced What I've added:
The datalist/typeahead functionality was already fully implemented in the DBInput component. Now it's properly showcased with practical examples that developers can reference. Commit: e8e28a8 |
# Conflicts: # __snapshots__/input/showcase/chromium-highContrast/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png # __snapshots__/input/showcase/chromium/DBInput-should-match-screenshot-1/DBInput-should-match-screenshot.png
nmerget
requested review from
michaelmkraus,
nmerget and
sarahbrng
as code owners
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
The DBInput component already had full datalist support implemented, but the showcase was missing the referenced
DatalistExamplescomponent files, preventing the examples from being displayed properly.What was fixed
The
input.jsonconfiguration referenced"codeFileName": "DatalistExamples"but the actual component files didn't exist, causing the showcase to fail when trying to display the datalist examples.Changes made
Datalist functionality includes
- HTML5 datalist element generation with proper accessibility
- Support for both
- Framework integration for Angular, React, and Vue
- ARIA attributes for screen reader compatibility
string[]andValueLabelType[]formatsThe screenshot shows the working datalist functionality with dropdown suggestions appearing when typing "Ber" in the "Search Cities" field.
Fixes #4205.
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.