3

I have an input filed in SAPUI5. Whenever the screen loads, it gets focus automatically with dotted lines as shown in below Image:

Input Field Image

Also, when I click the input field, it gets focused and the dotted line is displayed. How do I remove this dotted line / disable focus when I click on input field?

The HTML text of the input field can be seen here: https://openui5.hana.ondemand.com/entity/sap.m.Input/sample/sap.m.sample.InputStates

2
  • Consider editing your question to include the text of the applicable HTML of the textbox shown in the image reference.
    – JohnH
    Jun 5, 2021 at 0:39
  • @JohnH It's from the framework called "UI5". Unfortunately, beginners tend to remove the focus ring completely via custom CSS without knowing its purpose. Jun 9, 2021 at 16:25

2 Answers 2

1

Don't. The focus ring ("dotted line") is there for accessibility reasons and critical to keyboard users.

Regarding input fields: displaying the focus ring there is consistent with how most browsers natively behave. Regardless of the user's input modality (keyboard or mouse), the focus ring is always displayed. Besides improving the UX consistency, it also helps users to find the current input target quickly.

Having said that, I still believe that the current focus indication heuristic in UI5 should be revised, especially since the introduction of the :focus-visible pseudo class which is supported by all modern browsers. None of the accessibility standards I'm aware of dictates that the focus ring should be displayed for all elements and all the time regardless of the input modality.

Instead of trying to remove the focus ring completely, consider voting for https://github.com/SAP/openui5/issues/1289 (Give a 👍, comment, etc).

2
  • Well how in the world did we live without that outline before? That makes even more ugly looking SAP UI, why enterprise solution should be ugly?
    – bora89
    Oct 18, 2023 at 10:23
  • @bora89 Enterprise applications, in general, are often legally required to strictly follow a11y standards and guidelines. AFAIK SAP has its own spec on top of the existing a11y standards which is supposed to apply to all UI technologies maintained by SAP. If you're a paying customer, you could contact SAP to address your issue. But for now, browsers don't seem to fully support people with visual and cognitive impairments, hence the need to display the focus ring always. Otherwise, we'd be able to combine :focus-visible and browser settings. Oct 18, 2023 at 11:29
0

Add css like:

.sapMInput.sapMFocus .sapMInputBaseContentWrapper {
    outline:0px;
}
7
  • 2
    Never ever change standard SAP css
    – KristoffDT
    Jun 7, 2021 at 12:51
  • 1
    This is not change, just to write in custom css file Jun 9, 2021 at 14:44
  • How is this not changing the standard style? Jun 9, 2021 at 16:07
  • @KristoffDT ahah why not? UI5 feels archaic and not flexible, people whould not change it that way if they could easily configure that but they can't ))
    – bora89
    Oct 18, 2023 at 10:25
  • @bora89 there are multiple reasons why not to change Standard SAP CSS. To mention a few: SAPUI5 has a specific styling which makes it the ideal framework to implement Fiori applications. One of the main goals of Fiori is a consistent look-and-feel across applications, which you will break if you start overruling standard CSS. Secondly and maybe most importantly, SAP doesn't guarantee that SAP CSS classes will remain the same in UI5 upgrades, meaning potential rework in future. Lastly if you do want to decide to overrule standard styling, do it via a custom CSS-class.
    – KristoffDT
    Oct 30, 2023 at 7:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.