修掉生图弹窗点输入框就弹素材选择框:label 转发点击到 @ 按钮
Project CI / AI game creator shell Rust shard 3/4 (pull_request) Has been cancelled
Project CI / AI game creator shell Rust shard 4/4 (pull_request) Has been cancelled
Project CI / AI game creator shell Rust smoke (pull_request) Has been cancelled
Project CI / AI game creator shell Rust crates (pull_request) Has been cancelled
Project CI / Backend tests (pull_request) Has been cancelled
Project CI / Native shell tests (pull_request) Has been cancelled
Project CI / Frontend tests (pull_request) Has been cancelled
Project CI / Repository checks (pull_request) Has been cancelled
Project CI / AI game creator shell web tests (pull_request) Has been cancelled
Project CI / AI game creator shell Rust shard 1/4 (pull_request) Has been cancelled
Project CI / AI game creator shell Rust shard 2/4 (pull_request) Has been cancelled

- 现象:点生成提示词输入框任意位置都会弹出「选择素材」。根因是这一格用 `<label>` 包住,而 `<label>` 会把点击转发给内部第一个可标注控件——正好是引用输入区里的「插入素材引用」按钮
- 处理:该格改为 `<div>` 包裹;可访问名仍由控件自身的 aria-label 提供(引用输入区 `ariaLabel` 与 `PlatformTextField` 的 `aria-label`),不依赖 label 关联
- 用例:`resourceCanvasAssetGenerationReferences` 新增「点提示词输入区不该自己弹出素材选择框,只有 @ 按钮才开」——先用旧代码复现出红灯再修
- 顺带扫过资源工作台其余 `<label>`:都只包纯 input / textarea(音频与视频生成面板用纯 textarea,没有 @ 按钮),无同类隐患
- 待办文档补「2026-09-21 第三批」:卡片浮层提交即关、动画面板样式整档照抄与守卫升级、本条 label 修复
This commit is contained in:
2026-09-21 00:37:08 +08:00
parent 55259683b8
commit aa3e29f04e
3 changed files with 49 additions and 2 deletions
@@ -408,7 +408,13 @@ export function ResourceCanvasAssetGenerationPanelView({
onChange={(event) => setAssetName(event.currentTarget.value)}
/>
</label>
<label>
{/*
这一格**不能**用 `<label>` 包:`<label>` 会把点击转发给内部第一个可标注控件,而这一格里
第一个可标注控件是引用输入区的「插入素材引用」按钮——于是点输入框任意位置都会弹出素材
选择框(客户端验收现场那条)。两边的可访问名都由控件自身的 `aria-label` 提供(引用输入区
的 `ariaLabel` 与 `PlatformTextField` 的 `aria-label`),不依赖 label 关联。
*/}
<div>
<span>生成提示词</span>
{referenceEnabled ? (
/*
@@ -444,7 +450,7 @@ export function ResourceCanvasAssetGenerationPanelView({
onChange={(event) => setPrompt(event.currentTarget.value)}
/>
)}
</label>
</div>
{action.adjustableDimensions ? (
<div className="resource-canvas-asset-generation-dimensions">
<PlatformSegmentedTabs
@@ -300,6 +300,36 @@ describe('生成面板的参考接线', () => {
});
});
test('点提示词输入区不该自己弹出素材选择框', async () => {
const user = userEvent.setup();
const imageAsset = asset('asset-a', 'image/png', 'assets/素材-a.png');
render(
<ResourceCanvasAssetGenerationPanelView
action={imageAction}
assets={[imageAsset]}
projectPath="/tmp/project"
draft={{
prompt: '',
assetName: '猫',
aspectRatio: '1:1',
imageSize: '1K',
references: [],
}}
onSubmit={vi.fn()}
onClose={() => undefined}
/>,
);
await user.click(screen.getByLabelText('生成提示词'));
expect(screen.queryByRole('dialog', { name: '选择素材' })).toBeNull();
// 只有「插入素材引用」这一枚按钮才打开选择器。
await user.click(screen.getByRole('button', { name: '插入素材引用' }));
expect(
await screen.findByRole('dialog', { name: '选择素材' }),
).not.toBeNull();
});
test('超限时提交被挡住并给出原因', async () => {
const user = userEvent.setup();
const onSubmit =