`SyntaxError` in Input Field When Entering Only an Opening Brace `{` in SAP UI5

[dhruday]

OpenUI5 version: (Please specify the version you are using, e.g., "1.108.0")

Browser/version (+device/version):

• Google Chrome (Version 114.0.5735.199)
• Mozilla Firefox (Version 115.0.2)
• (Include any other browsers you’ve tested, with version numbers and whether the issue occurred)

Any other tested browsers/devices (OK/FAIL):

• Microsoft Edge (FAIL)
• Safari on iOS (OK)
• (List others as applicable)

URL (minimal example if possible):
Provide a link to a minimal example that reproduces the issue, if possible. If not possible, mention that.

User/password (if required and possible - do not post any confidential information here):
Mention if a user/password is required to access the example, or state "N/A".

---

Steps to reproduce the problem:

1. Navigate to the page where the input field is present.
2. Enter only an opening brace { in the input field.
3. Click the "Save" or "Accept" button to submit the input.

What is the expected result?
The application should handle the input gracefully without throwing any errors. It could either:

• Notify the user of the invalid input.
• Escape the braces properly to avoid syntax issues.

What happens instead?
A SyntaxError is thrown with the following message:

SyntaxError: no closing braces found in '{' after pos:0 (at BindingParser-dbg.js:409:10)

Any other information? (attach screenshot if possible)
Include any additional context that might help, such as:

• Screenshots showing the error message.
• Any relevant logs.
• The simplified version of the code you shared:

  const hbox = new sap.m.HBox({
    items: [
        new sap.m.Title({
            text: "{/title}"
        }).addStyleClass('BILP-KPI-title sapUxAPObjectPageSectionTitle'),
        new sap.m.Input({
            editable: true,
            placeholder: "{i18n>tileTabName}",
            value: "{/kpiTitle}"
        }),
    ]
  });

This should give the SAP UI5 community a clear and detailed understanding of the issue, making it easier for them to provide help.

https://community.sap.com/t5/technology-q-a/syntaxerror-no-closing-braces-found-in-after-pos-0-at-bindingparser-dbg-js/qaq-p/13747432

[boghyon]

Could you please share the callstack of the error?

---

Possibly related issues: https://github.com/SAP/openui5/issues?q=is%3Aissue+curly+escapeSettingsValue

[dhruday]

Kindly please go through screenshot

[boghyon]

Steps to reproduce:

1. https://jsbin.com/zodukup/edit?html,js,console,output which runs with 1.120
2. Enter { in the input field.

The following line in AnchorBar#_createSelectItem puts the given value directly without ManagedObject.escapeSettingsValue:

https://github.com/SAP/openui5/blob/61f051661546ab5489b5c844873bef508f36938d/src/sap.uxap/src/sap/uxap/AnchorBar.js#L306

From escapeSettingsValue:

Should be used when property values are initialized with static string values which could contain binding characters (curly braces)

Same issues in:

https://github.com/SAP/openui5/blob/61f051661546ab5489b5c844873bef508f36938d/src/sap.uxap/src/sap/uxap/ObjectPageLayoutABHelper.js#L108-L111

https://github.com/SAP/openui5/blob/61f051661546ab5489b5c844873bef508f36938d/src/sap.uxap/src/sap/uxap/ObjectPageLayoutABHelper.js#L122

https://github.com/SAP/openui5/blob/61f051661546ab5489b5c844873bef508f36938d/src/sap.uxap/src/sap/uxap/ObjectPageLayoutABHelper.js#L70

[i556484]

Hello @dhruday , Thank you for sharing this finding. I've created an internal incident DINC0240213. The status of the issue will be updated here in GitHub.

[kgogov]

Hello @boghyon,

Thank you for the thorough analysis you've provided on this ticket—your efforts are greatly appreciated!

@dhruday, you can apply the fix starting with OpenUI5 version 1.128.

Best regards, Konstantin Gogov

[boghyon]

Thanks for the quick fix @kgogov. I think the anchorBarButtonColor should be also fixed in:

https://github.com/SAP/openui5/blob/adfed6aa7478fc5e16fa39e21f09e2538a536502/src/sap.uxap/src/sap/uxap/ObjectPageLayoutABHelper.js#L109-L112

The problem is: as soon as the wrong value containing { is stored in the server, and the app generates the OPL based on the stored value at runtime, the app cannot be started anymore due to the error.

[kgogov]

Hello @boghyon,

Thank you for pointing out the additional issue with the anchorBarButtonColor. I’ve addressed the problem and created a follow-up commit to resolve it.

Best regards, Konstantin Gogov