---
number: 4971
title: 'Fix #4799 - form.field.Select Editable False Behavior'
author: stokedowl
state: CLOSED
createdAt: '2023-10-04T11:57:23Z'
updatedAt: '2023-10-12T04:59:15Z'
closedAt: '2023-10-12T04:59:14Z'
mergedAt: null
head: dev
base: dev
url: 'https://github.com/neomjs/neo/pull/4971'
---


https://github.com/neomjs/neo/assets/24494104/7491568f-ee24-4664-87ae-a98f60cdb361

## Summary:
This PR addresses the issue outlined in #4799 regarding the behavior of `form.field.Select` when `editable` is set to `false`. Previously, the picker wouldn't hide onFocusLeave() due to certain CSS rules (pointer-events: none; user-select: none;) applied to the input node, causing manager.Focus to be confused as the field wasn't receiving a click event.

## Changes:
- Modified the `shouldHideTrigger` method in `Text.mjs` to return `true` to hide the trigger when the field is read-only.
- Overridden the `shouldHideTrigger` method in `Picker.mjs` to return `false` to not hide the trigger for the Picker class.
- Removed the CSS rules (`pointer-events: none; user-select: none;`) that were causing the onFocusLeave event issue from `.neo-pickerfield .neo-not-editable .neo-textfield-input`.

These changes result in a cleaner and expected behavior of the `form.field.Select` component when `editable` is set to `false`, ensuring that the picker hides correctly on onFocusLeave without being affected by the specified CSS rules.

## Testing:
- Ensure that the `form.field.Select` component behaves as expected when `editable` is set to both `true` and `false`.
- Verify that the onFocusLeave event triggers the picker to hide correctly.
- Test the interaction and focus behavior of the input node and picker trigger under different conditions.

**What kind of change does this PR introduce?** (check at least one)

- [x] Bugfix

**Does this PR introduce a breaking change?** (check one)

- [ ] Yes
- [x] No

**The PR fulfills these requirements:**

- [x] It's submitted to the `dev` branch, _not_ the `master` branch
- [x] When resolving a specific issue, it's referenced in the PR's title (e.g. `fix #xxx[,#xxx]`, where "xxx" is the issue number)



## Comments

### `@tobiu` commented on 2023-10-05T08:01:30Z

hi @stokedowl, you did pick a pretty challenging ticket for getting started.

sadly, i can not accept the PR in the current state: we must not set `readOnly` to true for non-editable fields. while it does work, the problem is accessibility. setting this config will also apply `readonly` on DOM level:
https://github.com/neomjs/neo/blob/dev/src/form/field/Text.mjs#L649

then browsers (or even worse screen readers) think, that users are not supposed to fill out the related field at all.

so, we need to apply the same logic, just in a different way. e.g. we do get the css selector `neo-not-editable` (inside form.field.Picker):
https://github.com/neomjs/neo/blob/dev/resources/scss/src/form/field/Picker.scss

which currently already sets `user-select: false`. the problem here is that the field does not receive focus then, when clicking on the input node. as a result, focussing a different node will not trigger a focusLeave event and an open picker does not get hidden. solving it in a clean way is definitely non-trivial.

accessibility will become a huge topic for us starting in january => we want to add aria roles to each neo component and add keyboard navigation to more spots (e.g. toolbars & buttons).

in case more people want to contribute, we also need to get better in describing tickets & a roadmap. we can talk about it inside the workshop :)

---

### `@ExtAnimal` commented on 2023-10-12T04:59:15Z

Superseded by https://github.com/neomjs/neo/pull/5006

---

