[Bug] - Strange styles in the Select component, and the popup doesn't open

[taraschuiko]

Component Select, FormControl (type DROPDOWN)

Describe the bug The Select component has strange styles (border, margin: auto, etc.) and it throws "this.popover.show is not a function" error on click.

To Reproduce Steps to reproduce the current behavior:

1. Render Select component <FwSelect label="Test" name="test" options={[ { label: "Mr.", value: "Mr." }, { label: "Mrs.", value: "Mrs." }, { label: "Ms.", value: "Ms." }, ]} />
2. Open in a browser
3. See strange styles
4. Click on the component
5. See the console error and the popup is not opened

Expected behavior Render a select component without the border and not centered, open the popup with options on click

Screenshots

[kaushal-freshworks]

Hello, I looked at your bug report. I see one issue is in the options object. The main attributes are "value" and "text". I see in your options object it is "label" and "value". I have attached screen shot of a sample with the correct attributes. Please try it out once and let us know.

Regarding the second part in your bug of Strange Styles I am not a 100% sure of what you mean by this. By default the will take 100% width of the container that contains it. However I have set the width for the and shown how you can change the width of the . Please see above screen shot and note the "style" attribute.

In the Css you also need to set this attribute

.App { font-family: sans-serif; text-align: center; --fw-popover-max-width: 100px; }

This ensures that the options dropdown width is also controlled.

Hope this helps.

[kaushal-freshworks]

You can look at this sample code https://codesandbox.io/s/boring-bird-5359hk?file=/src/App.js

[haass-io]

@kaushal-freshworks Please update your chrome to the latest. Select, date components are broken.

[arvindanta]

@taraschuiko @haass-io , Can you please try the version 4.2.0-beta.19 ?.

In the latest version of chrome, they have introduced a popover attribute. https://developer.chrome.com/blog/introducing-popover-api/ .

And this was causing the existing popover functionality to break. This issue has been fixed in the version 4.2.0-beta.19- @next dist tag.

[suhostv]

@arvindanta thanks for the explanation, new beta version works well on Chrome 👍 When can we expect stable version with this fix?

[suhostv]

By the way, found one small but annoying bug related to Select component.

As you can see on first screenshot, select component goes over the right corner of parent container by 2 pixels, resulting in bad UI experience. I've tried to discover what is the issue and found that deep into the component shadow DOM there is a popover component with .input-container element that makes mistake calculating its own width. These calculations seems to take into consideration padding but not border width, resulting in 2px mismatch (2 screenshot)

Not sure if you were already aware of this issue, but it is pretty annoying not having Select components aligned with other inputs on the page 🙃

[arvindanta]

@suhostv Please try - @freshworks/crayons@4.2.0. The fix for above is also available in this latest version.