Skip to content

refactor(design-system): simplify OcSelect - #3524

Open
AlexAndBear wants to merge 1 commit into
mainfrom
refactor/oc-select
Open

AlexAndBear wants to merge 1 commit into
mainfrom
refactor/oc-select

Conversation

@AlexAndBear

Copy link
Copy Markdown
Member

Description

Refactors OcSelect to reduce custom code and lean on what vue-select already provides. The public API (props, emits, slots) is unchanged.

What changed Why
Styles rewritten using vue-select's --vs-* CSS variables plus Tailwind @apply (~150 lines of overrides removed) vue-select is themable via variables, so most !important overrides were unnecessary. Single-select and disabled states are now covered by vue-select's own styles
Script simplified to plain functions; computed wrappers for message line, attrs and label resolver removed Less indirection, easier to read
Resize listener via useEventListener from @vueuse/core Automatic cleanup, no manual onBeforeUnmount
Keyboard outline for the highlighted option is now a reactive oc-select-keyboard-navigation class (set on arrow keys, cleared on mouse move) The previous classList.add hack never removed the classes, so outlines could stick to options
Removed the custom ArrowUp/ArrowDown keydown handlers vue-select's defaults already do the same (preventDefault + typeahead)
$attrs are bound after the internal defaults Consumers can still override map-keydown / dropdown-should-open (used by TagsSelect, InviteCollaboratorForm, SpaceMemberSelect)
Default filter returns early on empty search and drops Fuse options that matched the defaults Same results, less work
Removed the console.warn for missing option label keys Missing keys now resolve to an empty string

Related Issue

  • None

How Has This Been Tested?

  • test environment: local dev server (pnpm vite) against a local OpenCloud backend, Chrome, light and dark theme
  • full explorative testing of all relevant OcSelect usages:
    • account preferences: language and theme selects, keyboard navigation with outline, outline cleared on hover
    • admin settings user edit panel: role select, groups multi-select (chips, deselect), quota select (custom value, e.g. 5 → 5 GB), disabled quota select for users who never logged in
    • "Add to groups" modal: positionFixed dropdown is aligned to the toggle, scrollable and limited to the viewport height
    • files sidebar tags select: creating a tag via comma, removing it via Backspace (consumer map-keydown)
    • all of the above checked again in the dark theme
  • unit tests: new test making sure consumers can override mapKeydown / dropdownShouldOpen, full unit suite passes
  • pnpm check:types, lint and format pass

Types of changes

  • Bugfix
  • Enhancement (a change that doesn't break existing code or deployments)
  • Breaking change (a modification that affects current functionality)
  • Technical debt (addressing code that needs refactoring or improvements)
  • Tests (adding or improving tests)
  • Documentation (updates or additions to documentation)
  • Maintenance (like dependency updates or tooling adjustments)

@AlexAndBear AlexAndBear added the Type:Maintenance E.g. technical debt, packaging, etc. label Oct 1, 2026
@AlexAndBear AlexAndBear self-assigned this Oct 1, 2026
@AlexAndBear
AlexAndBear requested a review from JammingBen October 1, 2026 13:48
@AlexAndBear

AlexAndBear commented Oct 1, 2026 •

Copy link
Copy Markdown
Member Author

@JammingBen i hope this gives us a little more confidence back to our beloved oc-select component :D

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Type:Maintenance E.g. technical debt, packaging, etc.

Projects

Status: In Progress

Development

Successfully merging this pull request may close these issues.

1 participant