Skip to content

perf(FilePicker): replace NcActionInput with NcPopover and NcTextField - #2690

Open
Antreesy wants to merge 2 commits into
mainfrom
perf/file-picker-new-folder-popover
Open

Antreesy wants to merge 2 commits into
mainfrom
perf/file-picker-new-folder-popover

Conversation

@Antreesy

Copy link
Copy Markdown
Contributor

Replace NcActionInput with NcPopover + NcTextField

  • NcActionInput imports NcPasswordField, NcDateTimePickerNative and lazy NcColorPicker, NcDateTimePicker and NcSelect
    • All those come bundled with library that may or may not use FilePicker (incl. ~100 date-fns locales in dist)
  • The "New folder" menu only needs a text field
    • Use NcPopover with NcButton trigger and NcTextField in a form, so Enter and the trailing arrow button submit
    • Keep the previous layout and spacing of NcActions with NcActionInput (folder icon aligned with the label, same paddings)
    • Reuse the existing translation strings

Screenshots:

Before After
-- See icon alignment
2026-10-20_10h55_09 2026-10-20_11h06_31
2026-10-20_11h07_32 2026-10-20_11h09_55

Net effect (bruteforcesettings app):

bruteforcesettings js/ (no .map / LICENSE) Before (HEAD) After Diff
Total size 2,437 KB 1,248 KB −1,188 KB (−49%)
Number of files 102 6 −96 (date-fns locales)
bruteforcesettings-main.js 979 KB 876 KB −103 KB
FilePicker chunk 341 KB 329 KB −11 KB
NcColorPicker / NcDateTimePicker chunks 2 0 −2

🤖 AI (if applicable)

  • The content of this PR was partly or fully generated using AI (ClaudeCode:claude-opus-5-5)

- NcActionInput imports NcPasswordField, NcDateTimePickerNative and lazy NcColorPicker, NcDateTimePicker and NcSelect, but the "New folder" menu only needs a text field
- Use NcPopover with NcButton trigger and NcTextField in a form, so Enter and the trailing arrow button submit
- Keep the previous layout and spacing of NcActions with NcActionInput (folder icon aligned with the label, same paddings)
- Reuse the existing "Create directory" string for the submit button label, no new translations

Assisted-by: ClaudeCode:claude-opus-5-5
Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
@Antreesy
Antreesy requested review from skjnldsv and susnux October 20, 2026 09:30
@Antreesy Antreesy self-assigned this Oct 20, 2026
@Antreesy Antreesy added 3. to review file picker javascript Pull requests that update javascript code labels Oct 20, 2026
@codecov

codecov Bot commented Oct 20, 2026 •

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 61.74%. Comparing base (c78bf13) to head (6b6e633).
⚠️ Report is 4 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #2690   +/-   ##
=======================================
  Coverage   61.74%   61.74%           
=======================================
  Files          15       15           
  Lines         481      481           
  Branches      104      104           
=======================================
  Hits          297      297           
  Misses        165      165           
  Partials       19       19           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

…ailing button

- Clicking the trailing button calls onSubmit directly and skips the native form validation, so an invalid name was silently ignored
- Call reportValidity on the input to show the native validation message, same as on Enter
- Close the popover on Escape, as NcPopover only stops the event propagation
- Add an accessible name to the dialog
- Drop redundant label prop and grid placement rules

Assisted-by: ClaudeCode:claude-opus-5-5
Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
@Antreesy
Antreesy force-pushed the perf/file-picker-new-folder-popover branch from 4764b2f to 6b6e633 Compare October 22, 2026 14:21

@susnux susnux left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

This seems like the wrong kind of optimization, instead of work around the symptoms the root cause should be fixed.
This is normal usage of the component for exact the use case it is expected to be used.
If there is a performance problem, then this should be fixed in the actions component directly

@Antreesy

Copy link
Copy Markdown
Contributor Author

If there is a performance problem, then this should be fixed in the actions component directly

I'd say it's more a bundling / tree-shaking problem, and specifically this one can't be solved without breaking changes.

Under the hood, you will get the same NcPopover and NcTextfield like in this PR, but because of multifunctional nature of NcActions* you will get an extra logic and async chunks on top (color picker, date picker, e.t.c.).
Unless we introduce light version of NcActionInput, there won't be any gain

This is normal usage of the component for exact the use case it is expected to be used.

And it may be acceptable for downstream app, but not for the library. IMO here we can and should trade off some complex boilerplate for final size.

@susnux

susnux commented Oct 24, 2026

Copy link
Copy Markdown
Contributor

And it may be acceptable for downstream app, but not for the library. IMO here we can and should trade off some complex boilerplate for final size.

It should not be acceptable anywhere. The component then must be fixed to only use what is needed.


I mean I guess for the short term this is "ok" (meaning this PR I guess we can apply!).

But this is not a fix, its just bandaid because of broken design of the component underneath.
I see this quite often that we apply "fixes" which are just workarounds and the real problem is not solved. In the end what is the reason to have the actions then anyways if you always have to workaround it?
All apps and libraries have then again applying similar workarounds instead of us fixing it properly by providing a solution for the root cause.

This branch has not been deployed

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

Labels

3. to review file picker javascript Pull requests that update javascript code

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants