fix: static-text fields should not show expression toggles

Author: Julusian

webui/src/Components/ListInputField.tsx

@@ -224,7 +224,8 @@ export const ListInputField = observer(function ListInputField({
 						const cellRaw = row[field.id]
 						const cell = normaliseCell(cellRaw)
 						const inputId = `${baseId}-${rowIndex}-${field.id}`
-						const canExpression = fieldSupportsExpression && !field.disableAutoExpression
+						const canExpression =
+							fieldSupportsExpression && !field.disableAutoExpression && field.type !== 'static-text'
 
 						const setCell = (newCell: ExpressionOrValue<JsonValue | undefined>) =>
 							updateCell(rowIndex, field.id, newCell)

webui/src/Components/__tests__/ListInputField.test.tsx

@@ -392,6 +392,23 @@ describe('ListInputField', () => {
 			expect(screen.getAllByRole('button', { name: /expression mode|value mode/i })).toHaveLength(2)
 		})
 
+		it('does not render an expression toggle for static-text fields', () => {
+			render(
+				<Controlled
+					definition={{
+						...definition,
+						fields: [
+							{ id: 'note', type: 'static-text', label: 'Attention', value: 'Read me' },
+							{ id: 'value', type: 'number', label: 'Value', min: 0, max: 100, step: 1, default: 0 },
+						],
+					}}
+					initialValue={[{ value: val(50) }]}
+					fieldSupportsExpression={true}
+				/>
+			)
+			expect(screen.getAllByRole('button', { name: /expression mode|value mode/i })).toHaveLength(1)
+		})
+
 		it('calls setValue with an expression cell when the toggle is activated', async () => {
 			const setValue = vi.fn()
 			const user = userEvent.setup()

webui/src/Controls/OptionsInputField.tsx

@@ -130,7 +130,8 @@ export const OptionsInputField = observer(function OptionsInputField({
 		/>
 	)
 
-	if (fieldSupportsExpression && option.type !== 'expression') {
+	// Static text has no value to drive with an expression
+	if (fieldSupportsExpression && option.type !== 'expression' && option.type !== 'static-text') {
 		const rawExpressionValue = rawValue || { isExpression: false, value: undefined }
 
 		control = (

webui/src/Controls/__tests__/OptionsInputField.test.tsx

@@ -0,0 +1,50 @@
+import { render, screen } from '@testing-library/react'
+import { describe, expect, it } from 'vitest'
+import type { SomeCompanionInputField } from '@companion-app/shared/Model/Options.js'
+import { Grid } from '~/Components/Grid.js'
+import { MenuPortalContext } from '~/Components/MenuPortalContext.js'
+import { RootAppStoreContext, type RootAppStore } from '~/Stores/RootAppStore.js'
+import { OptionsInputField } from '../OptionsInputField.js'
+
+const mockStore: Partial<RootAppStore> = {
+	variablesStore: {
+		allVariableDefinitions: { get: () => [] },
+	} as unknown as RootAppStore['variablesStore'],
+}
+
+function renderField(option: SomeCompanionInputField, fieldSupportsExpression: boolean) {
+	return render(
+		<RootAppStoreContext.Provider value={mockStore as RootAppStore}>
+			<MenuPortalContext.Provider value={document.body}>
+				<Grid.Row>
+					<OptionsInputField
+						allowInternalFields={false}
+						isLocatedInGrid={false}
+						entityType={null}
+						option={option}
+						value={undefined}
+						setValue={() => {}}
+						visibility={true}
+						localVariablesStore={null}
+						fieldSupportsExpression={fieldSupportsExpression}
+					/>
+				</Grid.Row>
+			</MenuPortalContext.Provider>
+		</RootAppStoreContext.Provider>
+	)
+}
+
+const toggleName = /expression mode|value mode/i
+
+describe('OptionsInputField', () => {
+	it('renders an expression toggle for a value field when expressions are supported', () => {
+		renderField({ id: 'text', type: 'textinput', label: 'Text', default: '' }, true)
+		expect(screen.getByRole('button', { name: toggleName })).toBeInTheDocument()
+	})
+
+	it('does not render an expression toggle for a static-text field', () => {
+		renderField({ id: 'note', type: 'static-text', label: 'Attention', value: 'Read me' }, true)
+		expect(screen.getByText('Read me')).toBeInTheDocument()
+		expect(screen.queryByRole('button', { name: toggleName })).toBeNull()
+	})
+})