fix: fix selected value for combobox, when not expanded, would overflow the form control.

[AliKdhim87]

issue-link;

Screenshot:

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 75.80%. Comparing base (d204084) to head (8164153).

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #706      +/-   ##
==========================================
- Coverage   76.02%   75.80%   -0.22%     
==========================================
  Files         225      225              
  Lines        4580     4580              
  Branches     1237     1237              
==========================================
- Hits         3482     3472      -10     
- Misses       1065     1075      +10     
  Partials       33       33              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[sergei-maertens]

So, I'm having some trouble reproducing this on https://open-formulieren.github.io/open-forms-sdk/?path=/story/form-io-components-vanilla-select--select&globals=viewport:largeMobile;selectedTheme:Gemeente+Utrecht, I suspect because the version of design tokens there is outdated.

I'd like to see a Storybook story for this patch though, that demonstrates the problem in unpatched instance & shows that the fix works, and that way we can also check that other themes don't break because of this.

Can you also run prettier via npm run format?

Do you have a screenshot how it looks like with the fix?

[AliKdhim87]

So, I'm having some trouble reproducing this on https://open-formulieren.github.io/open-forms-sdk/?path=/story/form-io-components-vanilla-select--select&globals=viewport:largeMobile;selectedTheme:Gemeente+Utrecht, I suspect because the version of design tokens there is outdated.

I'd like to see a Storybook story for this patch though, that demonstrates the problem in unpatched instance & shows that the fix works, and that way we can also check that other themes don't break because of this.

Can you also run prettier via npm run format?

Do you have a screenshot how it looks like with the fix?

Thank you for the quick response, @sergei-maertens. It appears that the version of the Combobox component in Storybook isn't the same as the one on the live site, which could be causing the issue. When I tried running Storybook locally to create the story for this patch, I encountered the following error:

10% building 0/2 entries 2/2 dependencies 0/2 modulesinfo Using tsconfig paths for react-docgen
ERROR in ./src/components/Anchor/design-tokens.mdx 6:0-67
Module not found: Error: Can't resolve '@open-formulieren/design-tokens/dist/tokens' in '/Users/ali/Dev/frameless/open-forms-sdk/src/components/Anchor'
 @ ./src/ lazy ^\.\/.*$ include: (?%21.*node_modules)(?:\/src(?:\/(?%21\.)(?:(?:(?%21(?:^%7C\/)\.).)*?)\/%7C\/%7C$)(?%21\.)(?=.)[^/]*?\.mdx)$ chunkName: [request] namespace object ./components/Anchor/design-tokens.mdx
 @ ./storybook-stories.js 10:11-14:5
 @ ./storybook-config-entry.js 6:0-50 18:31-39 25:2-28:4 25:58-28:3 27:31-39

ERROR in ./src/components/Button/design-tokens.mdx 6:0-67
Module not found: Error: Can't resolve '@open-formulieren/design-tokens/dist/tokens' in '/Users/ali/Dev/frameless/open-forms-sdk/src/components/Button'
 @ ./src/ lazy ^\.\/.*$ include: (?%21.*node_modules)(?:\/src(?:\/(?%21\.)(?:(?:(?%21(?:^%7C\/)\.).)*?)\/%7C\/%7C$)(?%21\.)(?=.)[^/]*?\.mdx)$ chunkName: [request] namespace object ./components/Button/design-tokens.mdx
 @ ./storybook-stories.js 10:11-14:5
 @ ./storybook-config-entry.js 6:0-50 18:31-39 25:2-28:4 25:58-28:3 27:31-39

ERROR in ./src/components/EditGrid/design-tokens.mdx 6:0-67
Module not found: Error: Can't resolve '@open-formulieren/design-tokens/dist/tokens' in '/Users/ali/Dev/frameless/open-forms-sdk/src/components/EditGrid'
 @ ./src/ lazy ^\.\/.*$ include: (?%21.*node_modules)(?:\/src(?:\/(?%21\.)(?:(?:(?%21(?:^%7C\/)\.).)*?)\/%7C\/%7C$)(?%21\.)(?=.)[^/]*?\.mdx)$ chunkName: [request] namespace object ./components/EditGrid/design-tokens.mdx
 @ ./storybook-stories.js 10:11-14:5
 @ ./storybook-config-entry.js 6:0-50 18:31-39 25:2-28:4 25:58-28:3 27:31-39

ERROR in ./src/components/LanguageSelection/design-tokens.mdx 6:0-67
Module not found: Error: Can't resolve '@open-formulieren/design-tokens/dist/tokens' in '/Users/ali/Dev/frameless/open-forms-sdk/src/components/LanguageSelection'
 @ ./src/ lazy ^\.\/.*$ include: (?%21.*node_modules)(?:\/src(?:\/(?%21\.)(?:(?:(?%21(?:^%7C\/)\.).)*?)\/%7C\/%7C$)(?%21\.)(?=.)[^/]*?\.mdx)$ chunkName: [request] namespace object ./components/LanguageSelection/design-tokens.mdx
 @ ./storybook-stories.js 10:11-14:5
 @ ./storybook-config-entry.js 6:0-50 18:31-39 25:2-28:4 25:58-28:3 27:31-39

ERROR in ./src/components/ProgressIndicator/design-tokens.mdx 6:0-67
Module not found: Error: Can't resolve '@open-formulieren/design-tokens/dist/tokens' in '/Users/ali/Dev/frameless/open-forms-sdk/src/components/ProgressIndicator'
 @ ./src/ lazy ^\.\/.*$ include: (?%21.*node_modules)(?:\/src(?:\/(?%21\.)(?:(?:(?%21(?:^%7C\/)\.).)*?)\/%7C\/%7C$)(?%21\.)(?=.)[^/]*?\.mdx)$ chunkName: [request] namespace object ./components/ProgressIndicator/design-tokens.mdx
 @ ./storybook-stories.js 10:11-14:5
 @ ./storybook-config-entry.js 6:0-50 18:31-39 25:2-28:4 25:58-28:3 27:31-39

ERROR in ./src/components/forms/InputGroup/InputGroup.mdx 6:0-67
Module not found: Error: Can't resolve '@open-formulieren/design-tokens/dist/tokens' in '/Users/ali/Dev/frameless/open-forms-sdk/src/components/forms/InputGroup'
 @ ./src/ lazy ^\.\/.*$ include: (?%21.*node_modules)(?:\/src(?:\/(?%21\.)(?:(?:(?%21(?:^%7C\/)\.).)*?)\/%7C\/%7C$)(?%21\.)(?=.)[^/]*?\.mdx)$ chunkName: [request] namespace object ./components/forms/InputGroup/InputGroup.mdx
 @ ./storybook-stories.js 10:11-14:5
 @ ./storybook-config-entry.js 6:0-50 18:31-39 25:2-28:4 25:58-28:3 27:31-39

ERROR in ./src/components/forms/TextField/design-tokens.mdx 6:0-67
Module not found: Error: Can't resolve '@open-formulieren/design-tokens/dist/tokens' in '/Users/ali/Dev/frameless/open-forms-sdk/src/components/forms/TextField'
 @ ./src/ lazy ^\.\/.*$ include: (?%21.*node_modules)(?:\/src(?:\/(?%21\.)(?:(?:(?%21(?:^%7C\/)\.).)*?)\/%7C\/%7C$)(?%21\.)(?=.)[^/]*?\.mdx)$ chunkName: [request] namespace object ./components/forms/TextField/design-tokens.mdx
 @ ./storybook-stories.js 10:11-14:5
 @ ./storybook-config-entry.js 6:0-50 18:31-39 25:2-28:4 25:58-28:3 27:31-39

ERROR in ./src/design-tokens.mdx 6:0-67
Module not found: Error: Can't resolve '@open-formulieren/design-tokens/dist/tokens' in '/Users/ali/Dev/frameless/open-forms-sdk/src'
 @ ./src/ lazy ^\.\/.*$ include: (?%21.*node_modules)(?:\/src(?:\/(?%21\.)(?:(?:(?%21(?:^%7C\/)\.).)*?)\/%7C\/%7C$)(?%21\.)(?=.)[^/]*?\.mdx)$ chunkName: [request] namespace object ./design-tokens.mdx
 @ ./storybook-stories.js 10:11-14:5
 @ ./storybook-config-entry.js 6:0-50 18:31-39 25:2-28:4 25:58-28:3 27:31-39

ERROR in ./src/formio/input-container-design-tokens.mdx 6:0-67
Module not found: Error: Can't resolve '@open-formulieren/design-tokens/dist/tokens' in '/Users/ali/Dev/frameless/open-forms-sdk/src/formio'
 @ ./src/ lazy ^\.\/.*$ include: (?%21.*node_modules)(?:\/src(?:\/(?%21\.)(?:(?:(?%21(?:^%7C\/)\.).)*?)\/%7C\/%7C$)(?%21\.)(?=.)[^/]*?\.mdx)$ chunkName: [request] namespace object ./formio/input-container-design-tokens.mdx
 @ ./storybook-stories.js 10:11-14:5
 @ ./storybook-config-entry.js 6:0-50 18:31-39 25:2-28:4 25:58-28:3 27:31-39

ERROR in ./src/styles.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[4]!./src/styles.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
   ╷
13 │ @import '@open-formulieren/design-tokens/dist/index';
   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  src/styles.scss 13:9  root stylesheet
 @ ./src/styles.scss 8:6-340 22:17-24 26:7-21 52:25-39 53:36-47 53:50-64 57:6-67:7 58:54-65 58:68-82 64:42-53 64:56-70 66:21-28 77:0-310 77:0-310 78:22-29 78:33-47 78:50-64 55:4-68:5
 @ ./.storybook/preview.js 16:0-21
 @ ./storybook-config-entry.js 9:1476-1548 30:2-33:4 30:1441-33:3

preview compiled with 10 errors
=> Failed to build the preview
99% end closing watch compilationWARN Force closed preview build
SB_BUILDER-WEBPACK5_0003 (WebpackCompilationError): There were problems when compiling your code with Webpack.
Run Storybook with --debug-webpack for more information.
    at starter (./node_modules/@storybook/builder-webpack5/dist/index.js:1:8088)
    at starter.next (<anonymous>)
    at Module.start (./node_modules/@storybook/builder-webpack5/dist/index.js:1:10083)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

[sergei-maertens]

@AliKdhim87 have you followed the git submodule steps on https://open-formulieren.github.io/open-forms-sdk/?path=/docs/introduction--docs#design-tokens? I think you don't have the design tokens submodule which is breaking the build :)