Bug Type: Component

Environment

• Vue Version: 3.4.35
• Element Plus Version: 2.7.8
• Browser / OS: Chrome, Opera on MacOS (Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36 OPR/111.0.0.0)
• Build Tool: CDN

Reproduction

Related Component

• el-upload

Reproduction Link

Element Plus Playground

Steps to reproduce

Set props drag :disabled="true" on ElUpload component and hover over the drag area.

What is Expected?

Compare with ElButton which has a Disabled Button section in its documentation. There the class is-disabled is set which changes the colors and the mouse cursor changes to not-allowed . Both changes would be expected in ElUpload as well.

What is actually happening?

It still renders the active hover border and shows the normal mouse cursor.

Additional comments

The issue exists at least from element plus version 2.3.12 on to latest.

Update on 2024-08-02:
Also, after implementing CSS styling for the disabled state of el-upload in our project, I've noticed that although el-upload has a prop disabled it receives the tab focus via keyboard and renders a colored border despite the CSS styles when that prop is set to true . That should be fixed as well.
That same tabindex issue applies to el-upload-list__item elements as well! When uploading multiple files and disabling the el-upload while uploads are in progress, the list items can be focussed using [TAB] key at the moment as well.