fix: ensure file input and name is cleared when crossing out files

[dodaa08]

Proposed changes (including videos or screenshots)

Resets the native file input value when a file is crossed, This ensures that the UI accurately reflects that no file is selected after a user clicks the "X" to remove a staged file.

The fix utilizes the fileInputRef to explicitly clear the native input element's value.

Screencast.From.2026-02-21.00-02-44.mp4

Issue(s)

Fixes #38850

Steps to test or reproduce

1. Go to Administration -> Import -> New Import.
2. Select an importer and upload a file.
3. Click the X on the file chip to remove it.
4. After: The native file input is cleared (shows "No file chosen").
5. (before fix): The file name remained visible in the native input despite the chip being gone.

Further comments

Happy to get feedback on the approach, let me know if any code changes are needed here.

Summary by CodeRabbit

• Bug Fixes
  • Improved the import page's file selector so clearing or removing the last uploaded file reliably resets the file input state, preventing stale selections.

[dionisio-bot]

Looks like this PR is not ready to merge, because of the following issues:

• This PR is missing the 'stat: QA assured' label
• This PR is missing the required milestone or project

Please fix the issues and try again

If you have any trouble, please check the PR guidelines

[changeset-bot]

⚠️ No Changeset found

Latest commit: ab720c6

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ab31d73 and 612d8bf.

📒 Files selected for processing (1)

• apps/meteor/client/views/admin/import/NewImportPage.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• apps/meteor/client/views/admin/import/NewImportPage.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: 📦 Build Packages
• GitHub Check: CodeQL-Build

---

Walkthrough

The change fixes a UI bug where the native file input kept showing a removed filename by adding a React ref to the file input and clearing its value when the staged files array becomes empty.

Changes

Cohort / File(s)	Summary
File Input Reference Management apps/meteor/client/views/admin/import/NewImportPage.tsx	Imported and used React's useRef, created fileInputRef, passed it to the InputBox, and added effect logic to clear the underlying file input value when the files array becomes empty.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

🐰 I nudged the input with a gentle tap,
Cleared the ghost name from the browser's map,
Chips hop away, the field is clean,
No stale filename to be seen,
Hooray — the import page is neat and spry!

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: using a ref to clear the file input and name when files are removed.
Linked Issues check	✅ Passed	The PR implements the objective from issue #38850 by using useRef to clear the native file input value when files are removed, resolving the UI inconsistency.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the file input clearing behavior described in issue #38850; no unrelated modifications detected.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[cubic-dev-ai]

No issues found across 1 file

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 08a702c and ab31d73.

📒 Files selected for processing (1)

• apps/meteor/client/views/admin/import/NewImportPage.tsx

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,tsx,js}

📄 CodeRabbit inference engine (.cursor/rules/playwright.mdc)

**/*.{ts,tsx,js}: Write concise, technical TypeScript/JavaScript with accurate typing in Playwright tests
Avoid code comments in the implementation

Files:

• apps/meteor/client/views/admin/import/NewImportPage.tsx

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)

• GitHub Check: 📦 Build Packages
• GitHub Check: cubic · AI code reviewer
• GitHub Check: CodeQL-Build

🔇 Additional comments (2)

apps/meteor/client/views/admin/import/NewImportPage.tsx (2)

23-23: LGTM — useRef import and fileInputRef declaration are correct.

useRef<HTMLInputElement>(null) is accurately typed for an HTMLInputElement ref.

Also applies to: 88-88

---

294-294: Verify that InputBox from @rocket.chat/fuselage forwards its ref to the underlying <input> element.

The fix at line 294 uses ref={fileInputRef} on InputBox, but if InputBox does not use forwardRef to propagate the ref to its native <input> element, then fileInputRef.current will be null at runtime and the chip removal via fileInputRef.current?.click() will silently fail.

Check the @rocket.chat/fuselage package source (or test at runtime) to confirm that InputBox properly forwards refs.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@apps/meteor/client/views/admin/import/NewImportPage.tsx`:
- Around line 104-112: The updater passed to setFiles inside
handleFileUploadChipClick currently performs a DOM mutation
(fileInputRef.current.value = '') which violates React updater purity; remove
that DOM write from the functional updater so the updater only returns
filteredFiles, and add a useEffect that watches files and, when files.length ===
0 and fileInputRef.current exists, sets fileInputRef.current.value = '' to
synchronise the native input. Update handleFileUploadChipClick to only compute
and return the new files array and rely on the new useEffect to clear the input.

[codecov]

Codecov Report

❌ Patch coverage is 50.00000% with 2 lines in your changes missing coverage. Please review.
✅ Project coverage is 70.57%. Comparing base (3145c41) to head (ab720c6).
⚠️ Report is 23 commits behind head on develop.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #38851      +/-   ##
===========================================
+ Coverage    70.55%   70.57%   +0.02%     
===========================================
  Files         3189     3189              
  Lines       112703   112707       +4     
  Branches     20429    20423       -6     
===========================================
+ Hits         79519    79546      +27     
+ Misses       31123    31102      -21     
+ Partials      2061     2059       -2     

🚀 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.