mui / mui/material-ui

[joy-ui][Input] Input element `onChange` nested in MenuItem does not fire.

Open
#41,731 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

on hold package: joy-ui scope: text field
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

Steps to reproduce

(All text is translated by DeepL.)

Here is a repository you can run right away.

Later, after reading the documentation, I tried to reproduce the code with this repository in StackBlitz, but was unable to do so because the preview showed "Error fetching cached project bundle for preview.".

It does not work in my environment, but I will share the link.

Steps:

  1. Start a dev server from a project in the repository or StackBlitz (if it works).
  2. Upload files from the Input element wrapped in a menu.
  3. Check the Console in the developer tools.
Current behavior

When I check the Console in the developer tools, there is no output.

(Is it the intended behavior that onChange does not fire here?)

Expected behavior

The following log output is expected

menuInput ▶ FileList {0: File, length: 1}
Context

We would like to be able to access the ability to upload files from the menu, as mentioned in the example repository.

Your environment
npx @mui/envinfo
  System:
    OS: Linux 6.6 Manjaro Linux
    CPU: (24) x64 AMD Ryzen 9 5900X 12-Core Processor
    Memory: 83.47 GB / 94.20 GB
    Container: Yes
    Shell: 5.9 - /usr/bin/zsh
  Binaries:
    Node: 21.6.2 - /usr/bin/node
    npm: 10.5.0 - /usr/bin/npm
    bun: 1.0.35 - ~/.bun/bin/bun
  Managers:
    Cargo: 1.77.0 - /usr/bin/cargo
    pip3: 24.0 - /usr/bin/pip3
    RubyGems: 3.3.25 - /usr/bin/gem
  Utilities:
    CMake: 3.28.3 - /usr/bin/cmake
    Make: 4.4.1 - /usr/bin/make
    GCC: 13.2.1 - /usr/bin/gcc
    Git: 2.44.0 - /usr/bin/git
    Clang: 16.0.6 - /usr/bin/clang
    Ninja: 1.11.1 - /usr/bin/ninja
    FFmpeg: 6.1.1 - /usr/bin/ffmpeg
    Curl: 8.6.0 - /usr/bin/curl
  Virtualization:
    Docker: 25.0.3 - /usr/bin/docker
  IDEs:
    Nano: 7.2 - /usr/bin/nano
    Vim: 9.1 - /usr/bin/vim
  Languages:
    Bash: 5.2.26 - /usr/bin/bash
    Go: 1.22.0 - /usr/bin/go
    Java: javac 22 - /usr/bin/javac
    Perl: 5.38.2 - /usr/bin/perl
    Protoc: 25.3 - /usr/bin/protoc
    Python: 3.11.8 - /usr/bin/python
    Python3: 3.11.8 - /usr/bin/python3
    Ruby: 3.0.6 - /usr/bin/ruby
    Rust: 1.77.0 - /usr/bin/rustc
  Databases:
    SQLite: 3.45.1 - /usr/bin/sqlite3
  Browsers:
    Chromium: 123.0.6312.58

Search keywords: joy input file onChange

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by running the linked BUGREPORT-Joy-upload_in_menu reproduction and compare it with the StackBlitz example if available. Trace the Joy UI Input and MenuItem entry points to determine why the file input's onChange is not observed when nested in the menu, then add a regression test showing the expected FileList output.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.