Skip to content

feat(fields): always-visible "Browse All" button on LookupField#1092

Merged
hotlong merged 2 commits intomainfrom
copilot/add-browse-all-button-lookup
Mar 19, 2026
Merged

feat(fields): always-visible "Browse All" button on LookupField#1092
hotlong merged 2 commits intomainfrom
copilot/add-browse-all-button-lookup

Conversation

Copy link
Contributor

Copilot AI commented Mar 19, 2026

RecordPickerDialog was only reachable via the in-popover "Show All Results" link, which is conditionally rendered when total > pageSize. For most datasets (<50 records), enterprise lookup features (multi-column table, sort/filter, cell renderers) were completely undiscoverable.

Changes

  • LookupField.tsx: Add a Button with TableProperties icon adjacent to the PopoverTrigger inside a flex row. Rendered unconditionally when hasDataSource is true. Opens RecordPickerDialog directly — independent of popover state or record count.
  • record-picker.test.tsx: 3 new tests — button renders with <5 records, opens dialog on click, hidden without dataSource.
  • lookup.mdx: Document "Browse All" button and dual entry points (button vs. in-popover link).
  • CHANGELOG.md: Entry under [Unreleased].
<div className="flex items-center gap-1.5">
  <Popover>
    <PopoverTrigger asChild>
      <Button className="min-w-0 flex-1 ...">...</Button>
    </PopoverTrigger>
    <PopoverContent>...</PopoverContent>
  </Popover>
  {hasDataSource && (
    <Button
      variant="outline"
      size="icon"
      onClick={() => setIsPickerOpen(true)}
      aria-label="Browse all records"
      data-testid="browse-all-records"
    >
      <TableProperties className="size-4" />
    </Button>
  )}
</div>

The existing conditional "Show All Results" inside the popover is preserved unchanged — both paths work independently.

Original prompt

This section details on the original issue you should resolve

<issue_title>[UX Enhancement] Always show "Browse All" button to open RecordPickerDialog in Lookup fields</issue_title>
<issue_description>## Background
Currently, the RecordPickerDialog (full enterprise picker) in Lookup fields is only accessible via the "Show All Results" button, which is only visible if the total record count exceeds the quick-select popover page size (default 50). For most CRM datasets, this means the enterprise dialog does not appear, and enterprise features like multi-column tables, sort/filter bar, and cell renderers are undiscoverable.

This creates a perception that the advanced lookup features are missing, limiting end user and customer impact—even though the underlying metadata and implementation are complete.

Requirement

Always render a dedicated "Browse All" (table icon) button next to the Lookup quick-select trigger (next to or inside the PopoverTrigger). This should:

  • Explicitly open the RecordPickerDialog (full-featured modal), regardless of record count
  • Remain visible at all times, showing unified UX with platforms like Salesforce, MS Dynamics, etc.
  • Use an accessible icon (Lucide's TableProperties or similar)
  • Clearly separate quick-select vs. enterprise browsing (popover vs. dialog)
  • Support keyboard accessibility and screen readers

Acceptance Criteria

  • Every LookupField with a dataSource/reference always renders a visible "Browse All" button
  • Button opens RecordPickerDialog directly, not conditionally
  • Both popover and dialog modes work independently—user can always swap between them
  • Table icon is accessible and visually unobtrusive
  • All feature flags/enterprise options (lookup_columns, lookup_filters, cell types) are demoable regardless of dataset size
  • Unit test: assert button exists and dialog opens on click, even with <5 records
  • Update Storybook, CRM demo, and docs to reference new enterprise entrypoint
  • Document upgrade in CHANGELOG.md

Out of Scope

  • No API/metadata changes are needed; this is a pure frontend enhancement
  • No breaking changes to existing filter/query logic

References

Comments on the Issue (you are @copilot in this section)


✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

@vercel
Copy link

vercel bot commented Mar 19, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
objectui Ready Ready Preview, Comment Mar 19, 2026 5:19am
objectui-demo Ready Ready Preview, Comment Mar 19, 2026 5:19am
objectui-storybook Ready Ready Preview, Comment Mar 19, 2026 5:19am

Request Review

…or direct RecordPickerDialog access

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
Copilot AI changed the title [WIP] [UX Enhancement] Always show 'Browse All' button in Lookup fields feat(fields): always-visible "Browse All" button on LookupField Mar 19, 2026
Copilot AI requested a review from hotlong March 19, 2026 05:15
@hotlong
Copy link
Contributor

hotlong commented Mar 19, 2026

@copilot 还是没有看到这个按钮

@hotlong hotlong marked this pull request as ready for review March 19, 2026 05:52
Copilot AI review requested due to automatic review settings March 19, 2026 05:53
@hotlong hotlong merged commit 8be85db into main Mar 19, 2026
5 of 6 checks passed
Copilot stopped work on behalf of hotlong due to an error March 19, 2026 05:53
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR improves LookupField discoverability by adding an always-visible “Browse All” (table icon) button that opens the enterprise RecordPickerDialog even when the quick-select popover dataset is small.

Changes:

  • Add an always-visible icon button next to the LookupField popover trigger (when a DataSource is available) to open RecordPickerDialog directly.
  • Add unit tests covering button visibility, dialog opening via click, and non-rendering when no dataSource exists.
  • Update Lookup field docs and changelog to document the new entry point alongside the existing “Show All Results” flow.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.

File Description
packages/fields/src/widgets/LookupField.tsx Adds a flex row wrapper and an unconditional (when hasDataSource) “Browse All” icon button that opens RecordPickerDialog.
packages/fields/src/record-picker.test.tsx Adds tests ensuring the new button renders, opens the dialog, and is hidden without a dataSource.
content/docs/fields/lookup.mdx Documents the new “Browse All” button and clarifies the two ways to open RecordPickerDialog.
CHANGELOG.md Adds an Unreleased entry for the always-visible “Browse All” button improvement.

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[UX Enhancement] Always show "Browse All" button to open RecordPickerDialog in Lookup fields

3 participants