Outline Property interferes with the type is search

[desig9stein]

Which component(s) are affected?

Input

Description

Since there are no dedicated outline-search or box-search styles, the <igc-input>'s outlined property conflicts with the type="search" attribute. This results in unintended styling when the input type is set to search.

To address this issue, one potential solution is to update the component's styles to ignore the outlined and box styles when the type is set to search. Alternatively, the outlined property can be programmatically disabled in the component's logic to prevent any interference.

In either case, it's important to clarify to users that if they set the type attribute to search, the outlined property will be ignored to ensure proper visual consistency and alignment with expected design.

Reproduction

1. Add an component to a page.
2. Set the type attribute of the component to "search".
3. Set the outlined property of the component to true.
4. Observe that the input styles are visually inconsistent or broken due to a conflict between the outlined property and the type="search" attribute styles.

Workaround

Don't use the outlined property if the input type is set to search

Is this a regression?

No or unsure. This never worker, or I haven't tried before.

Affected versions

All

Browser/OS/Node environment

All