[UX] Single-select dropdown in session popup interaction causes poor experience for long text input
[UX] Single-select dropdown in session popup interaction causes poor experience for long text input
Description
When a session interaction popup appears (e.g., editing or selecting input parameters), the UI presents a single-select dropdown for choosing input sources/options. However, when a user needs to type long content into such a field, the current dropdown-style interface offers an extremely poor experience:
- No free-text input mode: Users can only select from predefined options in the dropdown, with no ability to type custom text
- Text selection is forced: Even when the dropdown allows typing, selecting existing text to replace it with long content requires precise clicking
- No multi-line or expandable input: The dropdown interface cannot accommodate long text content
- Workflow disruption: Users who need to enter lengthy descriptions, prompts, or configurations are forced to work around the dropdown paradigm
Expected Behavior
The interaction popup should provide a proper text input experience when the use case requires long text entry:
- Switchable modes: Allow toggling between dropdown selection and free-text input
- Proper text input field: A standard
<input type="text">or<textarea>that accepts and displays long content - Full text selection support: Click-to-select all text, cursor positioning, and copy-paste working correctly
- Scrollable content: Long text should be scrollable within the input area
Current Behavior
The popup presents only a single-select dropdown (<select> or custom dropdown component) that:
- Shows a list of predefined options
- Forces selection from that list
- Does not provide a way to type custom content
- Makes it impossible to enter or edit long text efficiently
Affected Components
- Session interaction popup input fields
- Any modal/dialog where a single-select dropdown is used for input
- The
selectcomponent pattern used across the webui when user needs to enter free-form content
Proposed Fix
- Replace
<select>-only inputs in popup interactions with a proper text input component - Add an
autocomplete="off"attribute to prevent the password manager from triggering (also needed for the dropdown input fields) - Ensure the input field supports full text selection, cursor placement, and long content display
- Consider using
<input type="text">or<textarea>with proper ARIA attributes instead of dropdown-only UI
Technical Details
The dropdown pattern used in session interaction popups likely uses a component similar to the sidebar search or rename input — dynamically created without proper input classification attributes. The same autofill attributes issue (#7542) applies here, but the core problem is the dropdown UX pattern itself being inappropriate for long text entry scenarios.
中文描述
问题描述
在会话中弹出交互时(例如编辑或选择输入参数),UI 提供了一个单选下拉菜单来选择输入源/选项。但当用户需要在这样的字段中输入长内容时,当前下拉式界面体验极差:
- 无自由文本输入模式:用户只能从下拉列表中的预定义选项中选择,无法输入自定义文本
- 强制文本选择:即使下拉框允许输入,要替换为长内容也需要精确点击
- 不支持多行或可扩展输入:下拉界面无法容纳长文本内容
- 工作流程中断:需要输入长描述、提示词或配置的用户被迫绕过下拉范式
期望行为
交互弹出层应提供正确的文本输入体验,当使用场景需要长文本输入时:
- 可切换模式:允许在下拉选择和自由文本输入之间切换
- 正确的文本输入框:标准的
<input type="text">或<textarea>,接受并显示长内容 - 完整的文本选择支持:点击全选、光标定位、复制粘贴正常工作
- 可滚动内容:长文本在输入区域内可滚动
当前行为
弹出层仅提供单选下拉菜单(<select> 或自定义下拉组件),它:
- 显示预定义选项列表
- 强制从列表中选择
- 不提供输入自定义内容的方式
- 无法高效输入或编辑长内容
影响组件
- 会话交互弹出层输入框
- 任何使用单选下拉作为输入的模态框/对话框
- 当用户需要输入自由形式内容时,webui 中使用的
select组件模式
建议修复
- 将弹出交互中的
<select>-only 输入替换为正确的文本输入组件 - 添加
autocomplete="off"属性以防止密码管理器触发(#7542 中也需同样的修复) - 确保输入框支持完整文本选择、光标定位和长内容显示
- 考虑使用
<input type="text">或<textarea>配合正确的 ARIA 属性,而非仅下拉 UI
技术细节
会话交互弹出层中使用的下拉模式可能使用了与侧边栏搜索或重命名输入类似的组件——动态创建时缺少正确的输入分类属性。同样的自动填充属性问题(#7542)也适用,但核心问题是下拉 UX 范式本身不适合长文本输入场景。
Source: nesquena/hermes-webui