diff --git a/cypress/fixtures/flows/dashboard-text-input.json b/cypress/fixtures/flows/dashboard-text-input.json index 62bd738e9..c9dea5723 100644 --- a/cypress/fixtures/flows/dashboard-text-input.json +++ b/cypress/fixtures/flows/dashboard-text-input.json @@ -431,6 +431,38 @@ ] ] }, + { + "id": "c1d2e3f4a5b60718", + "type": "ui-text-input", + "z": "f4f554a38c3ce158", + "g": "ecc44c4e975ac4e9", + "group": "cf67bdc7fbda3210", + "name": "", + "label": "Marking Notes", + "order": 2, + "width": 0, + "height": 3, + "topic": "topic", + "topicType": "msg", + "mode": "textarea", + "tooltip": "", + "delay": 300, + "passthru": true, + "sendOnDelay": false, + "sendOnBlur": true, + "sendOnEnter": true, + "className": "", + "clearable": false, + "sendOnClear": false, + "icon": "", + "iconPosition": "left", + "iconInnerPosition": "inside", + "x": 290, + "y": 120, + "wires": [ + [] + ] + }, { "id": "9387656b7b07aa72", "type": "function", diff --git a/cypress/tests/widgets/text-input.spec.js b/cypress/tests/widgets/text-input.spec.js index 46071fc2d..fab8d0b8c 100644 --- a/cypress/tests/widgets/text-input.spec.js +++ b/cypress/tests/widgets/text-input.spec.js @@ -15,4 +15,30 @@ describe('Node/-RED Dashboard 2.0 - Text Input Widget', () => { cy.get('#nrdb-ui-widget-ab3346b81a7cf742 .nrdb-ui-text-field').trigger('mouseover') cy.get('.v-tooltip').should('contain', 'Tooltip Text') }) + + // Test case: Renders the textarea (multiline) mode correctly + it('renders the Text Input widget in textarea mode', () => { + cy.get('#nrdb-ui-widget-c1d2e3f4a5b60718 textarea').should('exist') + cy.get('#nrdb-ui-widget-c1d2e3f4a5b60718 .v-field__field label').should('contain', 'Marking Notes') + }) + + // Textarea padding is derived from the row height so the label clears the text + // without growing the row, scaling across densities (32/38/48px). + const densities = [ + { name: 'compact (32px row)', cls: 'nrdb-view-density--compact', top: '4px', bottom: '0px' }, + { name: 'comfortable (38px row)', cls: 'nrdb-view-density--comfortable', top: '7px', bottom: '3px' }, + { name: 'default (48px row)', cls: 'nrdb-view-density--default', top: '12px', bottom: '8px' } + ] + densities.forEach(({ name, cls, top, bottom }) => { + it(`derives textarea padding from the row height at ${name}`, () => { + cy.get('.nrdb-app') + .invoke('removeClass', 'nrdb-view-density--compact nrdb-view-density--comfortable nrdb-view-density--default') + .invoke('addClass', cls) + cy.get('#nrdb-ui-widget-c1d2e3f4a5b60718 textarea') + .parents('.v-field').first() + .find('.v-field__input') + .should('have.css', 'padding-top', top) + .and('have.css', 'padding-bottom', bottom) + }) + }) }) diff --git a/ui/src/widgets/ui-text-input/UITextInput.vue b/ui/src/widgets/ui-text-input/UITextInput.vue index 5d570692b..a7ba297b5 100644 --- a/ui/src/widgets/ui-text-input/UITextInput.vue +++ b/ui/src/widgets/ui-text-input/UITextInput.vue @@ -179,6 +179,11 @@ export default {