Edit: BCol applies to wrapper, not the <input> element
- Dominant language
- JavaScript
- Stars
- 2
- Forks
- 5
- Avg merge
- 5d
- Merged PRs (30d)
- 4
Description
## Symptom
When `BCol` is set on an `Edit` component, the colour is applied to a wrapper element rather than the `` itself. The yellow background is visible only because `` elements are normally transparent — under high-contrast modes, print stylesheets, or any future CSS change that sets a default `` background, the BCol value would not actually appear.
`getComputedStyle(input).backgroundColor` returns `rgb(255, 255, 255)` (the default white) even though the visual rendering shows the configured colour.
## Reproducer
Demo: `DemoSubFormEdit` (in `/demo`)
The "Colors" Edit at `F1.SF.EDIT7` is created with:
```apl
'F1.SF.EDIT7' eWC 'Edit' 'Blue on Yellow' (360 100)(23 200)('FCol'(0 0 255))('BCol'(255 255 200))
```
In the rendered demo:
- The text colour is correctly blue (`FCol` works on the input)
- The background appears yellow visually
- But inspecting the `` element shows `background-color: rgb(255, 255, 255)`
- The yellow is on a parent wrapper `
## Investigation
`src/components/Edit/index.jsx` rendering section (~lines 780-870)
The component constructs an inline `style` object that includes border, font, padding, etc. but `BCol` is not propagated to the ``'s inline `backgroundColor`. It appears to be applied only to a containing wrapper.
`FCol` is correctly passed to the input's `color` style.
## Suggested fix
Pass `BCol` to the `` element's inline style as `backgroundColor`, alongside the existing `color` (`FCol`) handling. This matches how Label and other components apply BCol directly to the visible element.
## Verification
After the fix, this Playwright assertion should pass:
```ts
const edit = page.locator('#F1\\.SF\\.EDIT7');
const bg = await edit.evaluate(el => getComputedStyle(el).backgroundColor);
expect(bg).toContain('255, 255, 200');
```
(Currently fails — the test queries the `` directly and gets the default white background.)
Contributor guide
Assessment
This issue has not been assessed yet.