Form: MultiComboBox has a different width inside a form

[CristianDDias]

Describe the bug
I'm using a Form component inside a Dialog component. This form has 3 components, a Select, a MultiComboBox and a DateTimePicker. As described on this issue, I used a width: 100% style on the form components. It works fine, but the MultiComboBox component is slightly wider than the other components.

I'm sorry, I know this is a very small issue, but it's something that we've noticed when developing the form.

Isolated Example
Codesandbox

To Reproduce

• Open the Codesandbox and check the MultiComboBox width, which is slightly wider than the other components.

Expected behavior
The MultiComboBox should have the same width as the other components.

Screenshots

UI5 Web Components for React Information
@ui5/webcomponents version: 1.0.0-rc.7
@ui5/webcomponents-react version: 0.9.11
Operating System: Windows
Browser: Chrome

[MarcusNotheis]

Hey @CristianDDias,

sorry for the late response, it was a terrible busy week.
I'm not 100% sure whether is misalignment is caused by our Form Component of if the MultiComboBox itself has an issue. I also opened SAP/ui5-webcomponents#1812 to double check.

[CristianDDias]

Hi @MarcusNotheis, thank you for fixing the issue.

Which version should I update my project to get this fix? Is it already available?

[MarcusNotheis]

Hey @CristianDDias, just released as @ui5/webcomponents-react@0.10.0-rc.4 :)

[CristianDDias]

Hi @MarcusNotheis, I've just tried the new version and it seems that it also has some issues.

• 1: It doesn't display all the label text (it truncates the text).
• 2: When the resolution is large (above 1440px width), the grid layout displays 24 columns and the form is smaller.

Check this new codesandbox and check the codesandbox app open in new window with resolution above 1440px.

[MarcusNotheis]

This looks like some bad side effect.
1.) I'll add a word wrap for that issue
2.) The 24 columns are actually intended to switch over into a two column layout on very large screens. I think the main issue is that our Form size is computed based on the viewport, not on the surrounding container - I'll try to change that.
Does this make sense for you or would you prefer another solution?

[CristianDDias]

1. Great!
2. Compute the Form size based on the container looks a good solution. Is there a way to avoid this two column layout? I'm already using data-layout={{ span: "XL12 L12 M12 S12" }}. Is there anything else that I need to do?

[MarcusNotheis]

yes, there will be now an option to control the columns.
I've created an API which is similar to the UI5 Form with props like labelSpanS/M/L/XL and columnsS/M/L/XL which allows you to control the form behaviour.

[MarcusNotheis]

Hey @CristianDDias,
can you try to use our snapshot build to test if the behavior is now correct?:

"@ui5/webcomponents-react": "0.0.0-40d95790",
"@ui5/webcomponents-react-base": "0.0.0-40d95790"

[CristianDDias]

Hi @MarcusNotheis, I've just tried, but I've got the following error when importing the Form:

ModuleNotFoundError
Could not find module in path: '@ui5/webcomponents-react-base/0.0.0-f25d2d12/hooks/useConsolidatedRef' relative to '/node_modules/@ui5/webcomponents-react/lib/Form.js'

I've also tried to use the version 0.0.0-f25d2d12, as displayed in the error message, but even so, the error still happens. Check this codesandbox.