Table: Datepicker, AutoComplete, Select Cell Editor

[ElishaSamPeterPrabhu]

Description

• Updated dropdown, autocomplete to accept badge and links args and datepicker of cell to handle out of focus

References

#2310 , #2311 , #2313

Type of change

• [ ] Bug fix (non-breaking change which fixes an issue)
• [x] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [ ] Documentation update

How Has This Been Tested?

https://deploy-preview-2387--moduswebcomponents.netlify.app/

Checklist

• [x] My code follows the style guidelines of this project
• [x] I have performed a self-review of my own code
• [ ] I have commented my code, particularly in hard-to-understand areas
• [ ] I have made corresponding changes to the documentation
• [x] My changes generate no new warnings
• [ ] I have added tests that prove my fix is effective or that my feature works
• [ ] New and existing unit tests pass locally with my changes
• [ ] Any dependent changes have been merged and published in downstream modules
• [x] I have checked my code and corrected any misspellings

[netlify[bot]]

✅ Deploy Preview for moduswebcomponents ready!

Name	Link
🔨 Latest commit	317ece504c1b4a26d766c2fc50a7558254afed2f
🔍 Latest deploy log	https://app.netlify.com/sites/moduswebcomponents/deploys/6662bb1ffd55eb0008e711cb
😎 Deploy Preview	https://deploy-preview-2387--moduswebcomponents.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 24 (no change from production) Accessibility: 98 (no change from production) Best Practices: 92 (no change from production) SEO: 92 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[cjwinsor]

@ElishaSamPeterPrabhu Some observations: Storybook:

• Autocomplete should have all First Names from Names array
• Autocomplete for the last row will have its items require the user to scroll down in the container to see
• CreatedAt should be of type Date so we can show that too
• Email column's Autocomplete options should contain all emails

Component:

• Autocomplete should set the value
• Autocomplete should show items on focus
• Autocomplete, you can't use arrows or tab to navigate the items in the list, table handling takes over. (arrows work for number)
• Autocomplete increases the row height
• Date should set value
• Date column and editor formatting should match
• Date doesn't lose focus when you click away
• Date Calendar is inside the overflow container, any way to pop it out? Last item you can look at

[cjwinsor]

@ElishaSamPeterPrabhu I went over these changes again and this is what I think is needed before we can merge:

• Remove the overflow: auto from .table-container in modus-table.scss. Instead modus-table.tsx should set overflow: auto only when a maxHeight is provided. This way, if no maxHeight is defined then the datepicker and autocomplete won't be hidden inside the overflow container. It doesn't fix for when maxHeight is defined, but at gives a workaround until we can address this.
• Switch from using "dropdown" for the Select component. Use "select" instead. Update all code to match. This is to avoid confusion with our drop down component we have already which is different.
• Don't reuse ModusTableCellDropdownEditorArgs for Autocomplete, create a new type for it.
• ModusTableCellDropdownEditorArgs should have optionsDisplayProp as well, in addition to options.
• The ModusTableCellAutocompleteEditorArgs which you'll have created above, should have the following additional properties (beyond just options): noResultsFoundText, noResultsFoundSubtext, showNoResultsFoundMessage, showOptionsOnFocus.
• ModusTableCellAutocompleteEditorArgs.options should be of type ModusAutocompleteOption
• For autocomplete, it seems if i click on the cell in the whitepace, then click on another cell, it loses focus correctly, but if i click on the text then another cell it doesn't loose focus. Might be related to the example being a link, I didn't check with a non link autocomplete column
• I think we need to make sure ModusTableCellEditorType in storybook and code shows and supports all the different cell editor types, it currently only shows type ModusTableCellEditorType = typeof CELL_EDIT_TYPE_DROPDOWN;

[ElishaSamPeterPrabhu]

@ElishaSamPeterPrabhu I went over these changes again and this is what I think is needed before we can merge:

• Remove the overflow: auto from .table-container in modus-table.scss. Instead modus-table.tsx should set overflow: auto only when a maxHeight is provided. This way, if no maxHeight is defined then the datepicker and autocomplete won't be hidden inside the overflow container. It doesn't fix for when maxHeight is defined, but at gives a workaround until we can address this.
• Switch from using "dropdown" for the Select component. Use "select" instead. Update all code to match. This is to avoid confusion with our drop down component we have already which is different.
• Don't reuse ModusTableCellDropdownEditorArgs for Autocomplete, create a new type for it.
• ModusTableCellDropdownEditorArgs should have optionsDisplayProp as well, in addition to options.
• The ModusTableCellAutocompleteEditorArgs which you'll have created above, should have the following additional properties (beyond just options): noResultsFoundText, noResultsFoundSubtext, showNoResultsFoundMessage, showOptionsOnFocus.
• ModusTableCellAutocompleteEditorArgs.options should be of type ModusAutocompleteOption
• For autocomplete, it seems if i click on the cell in the whitepace, then click on another cell, it loses focus correctly, but if i click on the text then another cell it doesn't loose focus. Might be related to the example being a link, I didn't check with a non link autocomplete column
• I think we need to make sure ModusTableCellEditorType in storybook and code shows and supports all the different cell editor types, it currently only shows type ModusTableCellEditorType = typeof CELL_EDIT_TYPE_DROPDOWN;

Have worked on all of the above suggestions Regarding the autocomplete focus behavior its seems to be working fine :

https://github.com/trimble-oss/modus-web-components/assets/122255626/05bddb9d-d570-4f9e-890f-ac779c4adf27

[ElishaSamPeterPrabhu]

For the autocomplete focus issue: Added this.cell.focus() when a link is clicked instead of the white space this handles the out of focus issue as expected PS: The link issue of autocomplete was present in the badge type as well when clicking on the badge directly instead of the whitespace, so added the same logic to badge as well.