fix: [DHIS2-21708] Org unit selector is expanded when form open if no org unit in top bar#4629
fix: [DHIS2-21708] Org unit selector is expanded when form open if no org unit in top bar#4629henrikmv wants to merge 10 commits into
Conversation
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
… DataEntry components
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
… accessibility improvements
|
| <div | ||
| ref={this.anchorRef} | ||
| className={triggerClassName} | ||
| > | ||
| <input | ||
| ref={this.searchInputRef} | ||
| className={classes.searchInput} | ||
| value={open ? inputValue : ''} | ||
| onChange={this.handleInputChange} | ||
| onClick={this.openMenu} | ||
| onKeyDown={this.handleKeyDown} | ||
| readOnly={!open} | ||
| disabled={disabled} | ||
| placeholder={open ? i18n.t('Search for an organisation unit') : undefined} | ||
| aria-haspopup="tree" | ||
| aria-controls={open ? this.popoverId : undefined} | ||
| data-test="org-unit-selector-trigger" | ||
| /> | ||
| <span className={classes.chevron}> | ||
| <IconChevronDown16 /> | ||
| </span> | ||
| </div> |
There was a problem hiding this comment.
🚩 Chevron icon area does not trigger popover open
The onClick={this.openMenu} handler is only on the <input> element (line 237), not on the outer trigger <div> or the chevron <span> (lines 246-248). Since the input has flexGrow: 1 and the chevron has marginLeft: 'auto', clicking the small chevron icon area (~16px) won't open the popover. Most dropdown-like components make the entire trigger area clickable. This is a minor UX gap but not a functional bug.
Was this helpful? React with 👍 or 👎 to provide feedback.
1 participant
DHIS2-21708
Refactors the
SingleOrgUnitSelectFieldfrom an always-visible org unit tree into a collapsed dropdown with a popover. When no value is selected, the user sees a combobox trigger with a chevron icon. Clicking it opens aPopovercontaining the org unit tree, with a debounced search input embedded in the trigger.Key changes:
SingleOrgUnitSelectField: replaces inline tree with a trigger +Popoverpattern, adds keyboard navigation, debounced search, and open/close state management.OrgUnitField: addshideSearchFieldandsearchTextprops so the parent can control search externally.