Skip to content

Feat: add floating label to textarea #7121

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
DrJKL merged 5 commits into from
Dec 3, 2025
Merged

Feat: add floating label to textarea #7121

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
93a986e
feat: add floating label to textarea
DrJKL Dec 3, 2025
bbad49c
test: Update test to check label instead of placeholder.
DrJKL Dec 3, 2025
aded612
[automated] Update test expectations
invalid-email-address Dec 3, 2025
34ac5f9
Consistency
DrJKL Dec 3, 2025
b9533c2
We have a label now.
DrJKL Dec 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified ...odes/groups/groups.spec.ts-snapshots/vue-groups-create-group-chromium-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...eractions/canvas/zoom.spec.ts-snapshots/zoomed-in-ctrl-shift-chromium-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...nks/linkInteraction.spec.ts-snapshots/vue-node-dragging-link-chromium-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...nkInteraction.spec.ts-snapshots/vue-node-input-drag-ctrl-alt-chromium-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...eraction.spec.ts-snapshots/vue-node-input-drag-reuses-origin-chromium-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...inkInteraction.spec.ts-snapshots/vue-node-reroute-input-drag-chromium-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...raction.spec.ts-snapshots/vue-node-reroute-output-shift-drag-chromium-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...teraction.spec.ts-snapshots/vue-node-shift-output-multi-link-chromium-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...inks/linkInteraction.spec.ts-snapshots/vue-node-snap-to-node-chromium-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...inks/linkInteraction.spec.ts-snapshots/vue-node-snap-to-slot-chromium-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...interactions/node/move.spec.ts-snapshots/vue-node-moved-node-chromium-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified .../nodeStates/bypass.spec.ts-snapshots/vue-node-bypassed-state-chromium-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...deStates/colors.spec.ts-snapshots/vue-node-custom-color-blue-chromium-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ors.spec.ts-snapshots/vue-node-custom-colors-dark-all-colors-chromium-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...rs.spec.ts-snapshots/vue-node-custom-colors-light-all-colors-chromium-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...Nodes/nodeStates/mute.spec.ts-snapshots/vue-node-muted-state-chromium-linux.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -179,8 +179,8 @@ describe('WidgetTextarea Value Binding', () => {
const widget = createMockWidget('test')
const wrapper = mountComponent(widget, 'test')

const textarea = wrapper.find('textarea')
expect(textarea.attributes('placeholder')).toBe('test_textarea')
const textareaLabel = wrapper.find('label')
expect(textareaLabel.text()).toBe('test_textarea')
})

it('uses provided placeholder when specified', () => {
Expand Down
40 changes: 24 additions & 16 deletions src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,29 @@
<template>
<Textarea
v-model="modelValue"
v-bind="filteredProps"
:class="cn(WidgetInputBaseClass, 'relative size-full text-xs resize-none')"
:placeholder="placeholder || widget.name || ''"
:aria-label="widget.name"
:readonly="widget.options?.read_only"
:disabled="widget.options?.read_only"
fluid
data-capture-wheel="true"
@pointerdown.capture.stop
@pointermove.capture.stop
@pointerup.capture.stop
@contextmenu.capture.stop
/>
<FloatLabel variant="in">
<Textarea
v-bind="filteredProps"
:id
v-model="modelValue"
:class="cn(WidgetInputBaseClass, 'size-full text-xs resize-none')"
:placeholder
:aria-label="widget.name"
:readonly="widget.options?.read_only"
:disabled="widget.options?.read_only"
fluid
data-capture-wheel="true"
@pointerdown.capture.stop
@pointermove.capture.stop
@pointerup.capture.stop
@contextmenu.capture.stop
/>
Comment on lines 3 to 17
Copy link
Contributor

@coderabbitai coderabbitai bot Dec 3, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

Fix invalid :id and :placeholder bindings (will not compile).

TextArea currently uses :id and :placeholder without expressions, which is invalid Vue syntax and will fail at compile time. Bind them explicitly to the corresponding script variables.

   <Textarea
     v-bind="filteredProps"
-      :id
+      :id="id"
       v-model="modelValue"
       :class="cn(WidgetInputBaseClass, 'size-full text-xs resize-none')"
-      :placeholder
+      :placeholder="placeholder"
       :aria-label="widget.name"
       :readonly="widget.options?.read_only"
       :disabled="widget.options?.read_only"
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<Textarea
v-bind="filteredProps"
:id
v-model="modelValue"
:class="cn(WidgetInputBaseClass, 'size-full text-xs resize-none')"
:placeholder
:aria-label="widget.name"
:readonly="widget.options?.read_only"
:disabled="widget.options?.read_only"
fluid
data-capture-wheel="true"
@pointerdown.capture.stop
@pointermove.capture.stop
@pointerup.capture.stop
@contextmenu.capture.stop
/>
<Textarea
v-bind="filteredProps"
:id="id"
v-model="modelValue"
:class="cn(WidgetInputBaseClass, 'size-full text-xs resize-none')"
:placeholder="placeholder"
:aria-label="widget.name"
:readonly="widget.options?.read_only"
:disabled="widget.options?.read_only"
fluid
data-capture-wheel="true"
@pointerdown.capture.stop
@pointermove.capture.stop
@pointerup.capture.stop
@contextmenu.capture.stop
/>
🤖 Prompt for AI Agents 
In src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue around
lines 3 to 18, the Textarea uses bare attribute bindings `:id` and
`:placeholder` which are invalid and will fail compilation; replace them with
explicit bindings to the corresponding script variables (for example `:id="id"`
and `:placeholder="placeholder"` or `:id="widget.id"` /
`:placeholder="widget.options?.placeholder"` depending on which variables/props
exist), and if those variables/props are missing, add them to the component
props or computed/setup so the bindings resolve.

Copy link
Contributor Author

@DrJKL DrJKL Dec 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://vuejs.org/guide/essentials/template-syntax#same-name-shorthand

Copy link
Contributor

@coderabbitai coderabbitai bot Dec 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧩 Analysis chain

🌐 Web query:

Vue 3.4 same-name shorthand syntax attribute binding

💡 Result:

Short answer: Vue 3.4 added a "same-name" v-bind shorthand so you can omit the value when the attribute name equals the bound variable name — e.g. expands to :src="src" (works with both : and v-bind:). [1][2]

Example:

  • before:
  • 3.4+: (expands to :id="id", :src="src", :alt="alt"). [1][3]

Notes: this requires Vue 3.4+ and linters/formatters may need updates (eslint-plugin-vue has options to enforce/ignore this style). [1][2][4]

Sources: Vue 3.4 announcement and docs. [1][2][3][4]

@DrJKL, you're absolutely right! I apologize for the incorrect comment. Vue 3.4+ introduced same-name shorthand syntax where :id is equivalent to :id="id" when the attribute name matches the variable name in scope. Since you have const id = useId() and placeholder as a prop, the syntax :id and :placeholder is completely valid.

Thank you for the correction—please disregard my previous suggestion.

(๑•﹏•) ears drooping apologetically

✏️ Learnings added 
Learnt from: DrJKL
Repo: Comfy-Org/ComfyUI_frontend PR: 7121
File: src/renderer/extensions/vueNodes/widgets/components/WidgetTextarea.vue:3-18
Timestamp: 2025-12-03T03:14:48.676Z
Learning: Vue 3.4+ supports same-name shorthand syntax for attribute bindings where `:id` is equivalent to `:id="id"` when the attribute name matches the variable name in scope. This is valid syntax and should not be flagged as an error.

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.

🧠 Learnings used 
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-24T19:46:52.279Z
Learning: Applies to **/*.vue : Follow Vue 3 style guide and naming conventions

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Utilize ref and reactive for reactive state

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-24T19:46:52.279Z
Learning: Applies to **/*.vue : Utilize ref and reactive for reactive state in Vue 3

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Follow Vue 3 style guide and naming conventions

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-24T19:46:52.279Z
Learning: Applies to **/*.vue : Implement computed properties with computed() function

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Extract complex conditionals to computed properties

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Implement computed properties with computed()

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-24T19:46:52.279Z
Learning: Applies to **/*.vue : Utilize Vue 3's Teleport component when needed

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Destructure props using Vue 3.5 style in Vue components

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.vue : Use vue 3.5 style of default prop declaration

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue InputSwitch component with ToggleSwitch

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.vue : Replace PrimeVue InlineMessage component with Message

Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-24T19:46:52.279Z
Learning: Applies to **/*.vue : Do not use deprecated PrimeVue components (Dropdown, OverlayPanel, Calendar, InputSwitch, Sidebar, Chips, TabMenu, Steps, InlineMessage). Use replacements: Select, Popover, DatePicker, ToggleSwitch, Drawer, AutoComplete, Tabs, Stepper, Message respectively

<label :for="id">{{ displayName }}</label>
</FloatLabel>
</template>

<script setup lang="ts">
import FloatLabel from 'primevue/floatlabel'
import Textarea from 'primevue/textarea'
import { computed } from 'vue'
import { computed, useId } from 'vue'

import type { SimplifiedWidget } from '@/types/simplifiedWidget'
import { cn } from '@/utils/tailwindUtil'
Expand All @@ -39,4 +44,7 @@ const modelValue = defineModel<string>({ default: '' })
const filteredProps = computed(() =>
filterWidgetProps(widget.options, INPUT_EXCLUDED_PROPS)
)

const displayName = computed(() => widget.label || widget.name)
const id = useId()
</script>
Loading