commercetools / commercetools/ui-kit

Selection Limitation with LocalizedTextField - Requires Workaround with Hidden LocalizedTextInput

Open
#3,098 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
154
Forks
28
Avg merge
8h 53m
Merged PRs (30d)
2

Description

**Description:**

The current implementation appears to have a limitation where selecting or focusing the localized text input functionality is not directly available within the `LocalizedTextField` component. This contrasts with the `LocalizedTextInput` component, which seems to offer this capability (as indicated by functions like `getId` and `getName` in its documentation).

![Image](https://github.com/user-attachments/assets/f9e25878-337f-4359-93c6-1e5108a8e911)

As a result of this limitation, consumers are forced to implement a workaround to achieve the desired selection behavior. This workaround involves rendering a `LocalizedTextInput` component and visually hiding it using `AccessibleHidden` (as demonstrated in [this example](https://github.com/commercetools/merchant-center-frontend/pull/18751/files#diff-0cb5f3e36c993bd30df47fadb2a5dc3b1fce85f9c6924e77de0e29dbabae9854L224-R252)). This adds unnecessary complexity to the component usage.

**Expected Behavior:**

Ideally, the `LocalizedTextField` component should provide a similar mechanism for selecting or focusing the localized text input fields as the `LocalizedTextInput` component, without requiring the use of a hidden component as a workaround.

**Current Behavior:**

The `LocalizedTextField` component lacks the necessary functionality (or has a different implementation) for programmatically selecting or focusing the input fields for different locales. This forces developers to use the aforementioned workaround.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.