From dfc61ec4d09da72ddd6e7ab726820529621dbd38 Mon Sep 17 00:00:00 2001 From: Abubakar Abid Date: Thu, 7 Dec 2023 08:03:11 -0800 Subject: [PATCH] Fix dropdown blur bug when values are provided as tuples (#6694) * fix dropdown blur bug * add changeset --------- Co-authored-by: gradio-pr-bot --- .changeset/small-crabs-take.md | 6 ++ js/dropdown/dropdown.test.ts | 37 ++++++++ js/dropdown/shared/Dropdown.svelte | 3 +- pnpm-lock.yaml | 140 ++++++----------------------- 4 files changed, 70 insertions(+), 116 deletions(-) create mode 100644 .changeset/small-crabs-take.md diff --git a/.changeset/small-crabs-take.md b/.changeset/small-crabs-take.md new file mode 100644 index 000000000000..4f2fcf7ac29b --- /dev/null +++ b/.changeset/small-crabs-take.md @@ -0,0 +1,6 @@ +--- +"@gradio/dropdown": patch +"gradio": patch +--- + +fix:Fix dropdown blur bug when values are provided as tuples diff --git a/js/dropdown/dropdown.test.ts b/js/dropdown/dropdown.test.ts index 35e7e9d169d2..e9b53620c227 100644 --- a/js/dropdown/dropdown.test.ts +++ b/js/dropdown/dropdown.test.ts @@ -370,4 +370,41 @@ describe("Dropdown", () => { options = getAllByTestId("dropdown-option"); expect(options[0]).toHaveClass("selected"); }); + + test("blurring a dropdown should set the input text to the previously selected value", async () => { + const { getByLabelText, getAllByTestId, component } = await render( + Dropdown, + { + show_label: true, + loading_status, + value: "", + allow_custom_value: false, + label: "Dropdown", + choices: [ + ["apple", "apple_internal_value"], + ["zebra", "zebra_internal_value"], + ["pony", "pony_internal_value"] + ], + filterable: true, + interactive: true + } + ); + + const item: HTMLInputElement = getByLabelText( + "Dropdown" + ) as HTMLInputElement; + + expect(item.value).toBe("apple"); + await item.focus(); + let options = getAllByTestId("dropdown-option"); + expect(options[0]).toHaveClass("selected"); + await item.blur(); + expect(item.value).toBe("apple"); + + await item.focus(); + await event.keyboard("z"); + expect(item.value).toBe("applez"); + await item.blur(); + expect(item.value).toBe("apple"); + }); }); diff --git a/js/dropdown/shared/Dropdown.svelte b/js/dropdown/shared/Dropdown.svelte index 4b16f2efb01f..8d71f8d91140 100644 --- a/js/dropdown/shared/Dropdown.svelte +++ b/js/dropdown/shared/Dropdown.svelte @@ -140,8 +140,9 @@ function handle_blur(): void { if (!allow_custom_value) { input_text = choices_names[choices_values.indexOf(value as string)]; + } else { + value = input_text; } - value = input_text; show_options = false; active_index = null; dispatch("blur"); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e16de6e926e2..60f46dcfc90e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,4 +1,4 @@ -lockfileVersion: '6.0' +lockfileVersion: '6.1' settings: autoInstallPeers: true @@ -262,16 +262,16 @@ importers: version: 2.0.0(@sveltejs/kit@1.26.0) '@sveltejs/kit': specifier: ^1.5.0 - version: 1.26.0(svelte@4.2.3)(vite@4.5.0) + version: 1.26.0(svelte@4.2.2)(vite@4.5.0) prettier: specifier: ^3.0.0 version: 3.0.0 prettier-plugin-svelte: specifier: ^3.0.0 - version: 3.0.0(prettier@3.0.0)(svelte@4.2.3) + version: 3.0.0(prettier@3.0.0)(svelte@4.2.2) svelte-check: specifier: ^3.0.1 - version: 3.4.4(@babel/core@7.23.3)(less@4.2.0)(postcss@8.4.27)(svelte@4.2.3) + version: 3.4.4(@babel/core@7.23.3)(less@4.2.0)(postcss@8.4.27)(svelte@4.2.2) typescript: specifier: ^5.0.0 version: 5.0.2 @@ -292,7 +292,7 @@ importers: version: 3.0.0 mdsvex: specifier: ^0.11.0 - version: 0.11.0(svelte@4.2.3) + version: 0.11.0(svelte@4.2.2) postcss: specifier: '>=8.3.3 <9.0.0' version: 8.4.27 @@ -305,7 +305,7 @@ importers: version: 2.0.2(@sveltejs/kit@1.27.6) '@sveltejs/kit': specifier: ^1.27.6 - version: 1.27.6(svelte@4.2.3)(vite@4.5.0) + version: 1.27.6(svelte@4.2.2)(vite@4.5.0) '@tailwindcss/forms': specifier: ^0.5.0 version: 0.5.0(tailwindcss@3.1.6) @@ -6729,7 +6729,7 @@ packages: peerDependencies: '@sveltejs/kit': ^1.0.0 dependencies: - '@sveltejs/kit': 1.26.0(svelte@4.2.3)(vite@4.5.0) + '@sveltejs/kit': 1.26.0(svelte@4.2.2)(vite@4.5.0) import-meta-resolve: 2.2.2 dev: true @@ -6738,7 +6738,7 @@ packages: peerDependencies: '@sveltejs/kit': ^1.0.0 dependencies: - '@sveltejs/kit': 1.27.6(svelte@4.2.3)(vite@4.5.0) + '@sveltejs/kit': 1.27.6(svelte@4.2.2)(vite@4.5.0) import-meta-resolve: 2.2.2 dev: true @@ -6747,7 +6747,7 @@ packages: peerDependencies: '@sveltejs/kit': ^1.5.0 dependencies: - '@sveltejs/kit': 1.27.6(svelte@4.2.3)(vite@4.5.0) + '@sveltejs/kit': 1.27.6(svelte@4.2.2)(vite@4.5.0) dev: true /@sveltejs/adapter-vercel@3.0.3(@sveltejs/kit@1.27.6): @@ -6755,7 +6755,7 @@ packages: peerDependencies: '@sveltejs/kit': ^1.5.0 dependencies: - '@sveltejs/kit': 1.27.6(svelte@4.2.3)(vite@4.5.0) + '@sveltejs/kit': 1.27.6(svelte@4.2.2)(vite@4.5.0) '@vercel/nft': 0.23.1 esbuild: 0.18.20 transitivePeerDependencies: @@ -6763,7 +6763,7 @@ packages: - supports-color dev: false - /@sveltejs/kit@1.26.0(svelte@4.2.3)(vite@4.5.0): + /@sveltejs/kit@1.26.0(svelte@4.2.2)(vite@4.5.0): resolution: {integrity: sha512-CV/AlTziC05yrz7UjVqEd0pH6+2dnrbmcnHGr2d3jXtmOgzNnlDkXtX8g3BfJ6nntsPD+0jtS2PzhvRHblRz4A==} engines: {node: ^16.14 || >=18} hasBin: true @@ -6772,7 +6772,7 @@ packages: svelte: ^3.54.0 || ^4.0.0-next.0 vite: ^4.0.0 dependencies: - '@sveltejs/vite-plugin-svelte': 2.5.2(svelte@4.2.3)(vite@4.5.0) + '@sveltejs/vite-plugin-svelte': 2.5.2(svelte@4.2.2)(vite@4.5.0) '@types/cookie': 0.5.4 cookie: 0.5.0 devalue: 4.3.2 @@ -6783,7 +6783,7 @@ packages: sade: 1.8.1 set-cookie-parser: 2.6.0 sirv: 2.0.3 - svelte: 4.2.3 + svelte: 4.2.2 tiny-glob: 0.2.9 undici: 5.26.5 vite: 4.5.0(@types/node@20.3.2)(less@4.2.0)(lightningcss@1.21.7)(sass@1.66.1)(stylus@0.62.0)(sugarss@4.0.1) @@ -6791,7 +6791,7 @@ packages: - supports-color dev: true - /@sveltejs/kit@1.27.6(svelte@4.2.3)(vite@4.5.0): + /@sveltejs/kit@1.27.6(svelte@4.2.2)(vite@4.5.0): resolution: {integrity: sha512-GsjTkMbKzXdbeRg0tk8S7HNShQ4879ftRr0ZHaZfjbig1xQwG57Bvcm9U9/mpLJtCapLbLWUnygKrgcLISLC8A==} engines: {node: ^16.14 || >=18} hasBin: true @@ -6800,7 +6800,7 @@ packages: svelte: ^3.54.0 || ^4.0.0-next.0 || ^5.0.0-next.0 vite: ^4.0.0 dependencies: - '@sveltejs/vite-plugin-svelte': 2.5.2(svelte@4.2.3)(vite@4.5.0) + '@sveltejs/vite-plugin-svelte': 2.5.2(svelte@4.2.2)(vite@4.5.0) '@types/cookie': 0.5.4 cookie: 0.5.0 devalue: 4.3.2 @@ -6811,7 +6811,7 @@ packages: sade: 1.8.1 set-cookie-parser: 2.6.0 sirv: 2.0.3 - svelte: 4.2.3 + svelte: 4.2.2 tiny-glob: 0.2.9 undici: 5.26.5 vite: 4.5.0(@types/node@20.3.2)(less@4.2.0)(lightningcss@1.21.7)(sass@1.66.1)(stylus@0.62.0)(sugarss@4.0.1) @@ -6849,7 +6849,7 @@ packages: - supports-color dev: false - /@sveltejs/vite-plugin-svelte-inspector@1.0.4(@sveltejs/vite-plugin-svelte@2.5.2)(svelte@4.2.3)(vite@4.5.0): + /@sveltejs/vite-plugin-svelte-inspector@1.0.4(@sveltejs/vite-plugin-svelte@2.5.2)(svelte@4.2.2)(vite@4.5.0): resolution: {integrity: sha512-zjiuZ3yydBtwpF3bj0kQNV0YXe+iKE545QGZVTaylW3eAzFr+pJ/cwK8lZEaRp4JtaJXhD5DyWAV4AxLh6DgaQ==} engines: {node: ^14.18.0 || >= 16} peerDependencies: @@ -6857,9 +6857,9 @@ packages: svelte: ^3.54.0 || ^4.0.0 vite: ^4.0.0 dependencies: - '@sveltejs/vite-plugin-svelte': 2.5.2(svelte@4.2.3)(vite@4.5.0) + '@sveltejs/vite-plugin-svelte': 2.5.2(svelte@4.2.2)(vite@4.5.0) debug: 4.3.4 - svelte: 4.2.3 + svelte: 4.2.2 vite: 4.5.0(@types/node@20.3.2)(less@4.2.0)(lightningcss@1.21.7)(sass@1.66.1)(stylus@0.62.0)(sugarss@4.0.1) transitivePeerDependencies: - supports-color @@ -6903,20 +6903,20 @@ packages: - supports-color dev: false - /@sveltejs/vite-plugin-svelte@2.5.2(svelte@4.2.3)(vite@4.5.0): + /@sveltejs/vite-plugin-svelte@2.5.2(svelte@4.2.2)(vite@4.5.0): resolution: {integrity: sha512-Dfy0Rbl+IctOVfJvWGxrX/3m6vxPLH8o0x+8FA5QEyMUQMo4kGOVIojjryU7YomBAexOTAuYf1RT7809yDziaA==} engines: {node: ^14.18.0 || >= 16} peerDependencies: svelte: ^3.54.0 || ^4.0.0 || ^5.0.0-next.0 vite: ^4.0.0 dependencies: - '@sveltejs/vite-plugin-svelte-inspector': 1.0.4(@sveltejs/vite-plugin-svelte@2.5.2)(svelte@4.2.3)(vite@4.5.0) + '@sveltejs/vite-plugin-svelte-inspector': 1.0.4(@sveltejs/vite-plugin-svelte@2.5.2)(svelte@4.2.2)(vite@4.5.0) debug: 4.3.4 deepmerge: 4.3.1 kleur: 4.1.5 magic-string: 0.30.5 - svelte: 4.2.3 - svelte-hmr: 0.15.3(svelte@4.2.3) + svelte: 4.2.2 + svelte-hmr: 0.15.3(svelte@4.2.2) vite: 4.5.0(@types/node@20.3.2)(less@4.2.0)(lightningcss@1.21.7)(sass@1.66.1)(stylus@0.62.0)(sugarss@4.0.1) vitefu: 0.2.5(vite@4.5.0) transitivePeerDependencies: @@ -12139,7 +12139,7 @@ packages: /mdn-data@2.0.30: resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==} - /mdsvex@0.11.0(svelte@4.2.3): + /mdsvex@0.11.0(svelte@4.2.2): resolution: {integrity: sha512-gJF1s0N2nCmdxcKn8HDn0LKrN8poStqAicp6bBcsKFd/zkUBGLP5e7vnxu+g0pjBbDFOscUyI1mtHz+YK2TCDw==} peerDependencies: svelte: '>=3 <5' @@ -12147,7 +12147,7 @@ packages: '@types/unist': 2.0.10 prism-svelte: 0.4.7 prismjs: 1.29.0 - svelte: 4.2.3 + svelte: 4.2.2 vfile-message: 2.0.4 dev: false @@ -13265,17 +13265,6 @@ packages: dependencies: prettier: 3.0.0 svelte: 4.2.2 - dev: false - - /prettier-plugin-svelte@3.0.0(prettier@3.0.0)(svelte@4.2.3): - resolution: {integrity: sha512-l3RQcPty2UBCoRh3yb9c5XCAmxkrc4BptAnbd5acO1gmSJtChOWkiEjnOvh7hvmtT4V80S8gXCOKAq8RNeIzSw==} - peerDependencies: - prettier: ^3.0.0 - svelte: ^3.2.0 || ^4.0.0-next.0 - dependencies: - prettier: 3.0.0 - svelte: 4.2.3 - dev: true /prettier@2.8.8: resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==} @@ -14629,34 +14618,6 @@ packages: - sass - stylus - sugarss - dev: false - - /svelte-check@3.4.4(@babel/core@7.23.3)(less@4.2.0)(postcss@8.4.27)(svelte@4.2.3): - resolution: {integrity: sha512-Uys9+R65cj8TmP8f5UpS7B2xKpNLYNxEWJsA5ZoKcWq/uwvABFF7xS6iPQGLoa7hxz0DS6xU60YFpmq06E4JxA==} - hasBin: true - peerDependencies: - svelte: ^3.55.0 || ^4.0.0-next.0 || ^4.0.0 - dependencies: - '@jridgewell/trace-mapping': 0.3.20 - chokidar: 3.5.3 - fast-glob: 3.3.2 - import-fresh: 3.3.0 - picocolors: 1.0.0 - sade: 1.8.1 - svelte: 4.2.3 - svelte-preprocess: 5.0.4(@babel/core@7.23.3)(less@4.2.0)(postcss@8.4.27)(svelte@4.2.3)(typescript@5.2.2) - typescript: 5.2.2 - transitivePeerDependencies: - - '@babel/core' - - coffeescript - - less - - postcss - - postcss-load-config - - pug - - sass - - stylus - - sugarss - dev: true /svelte-eslint-parser@0.32.2(svelte@4.2.2): resolution: {integrity: sha512-Ok9D3A4b23iLQsONrjqtXtYDu5ZZ/826Blaw2LeFZVTg1pwofKDG4mz3/GYTax8fQ0plRGHI6j+d9VQYy5Lo/A==} @@ -14821,57 +14782,6 @@ packages: strip-indent: 3.0.0 svelte: 4.2.2 typescript: 5.2.2 - dev: false - - /svelte-preprocess@5.0.4(@babel/core@7.23.3)(less@4.2.0)(postcss@8.4.27)(svelte@4.2.3)(typescript@5.2.2): - resolution: {integrity: sha512-ABia2QegosxOGsVlsSBJvoWeXy1wUKSfF7SWJdTjLAbx/Y3SrVevvvbFNQqrSJw89+lNSsM58SipmZJ5SRi5iw==} - engines: {node: '>= 14.10.0'} - requiresBuild: true - peerDependencies: - '@babel/core': ^7.10.2 - coffeescript: ^2.5.1 - less: ^3.11.3 || ^4.0.0 - postcss: ^7 || ^8 - postcss-load-config: ^2.1.0 || ^3.0.0 || ^4.0.0 - pug: ^3.0.0 - sass: ^1.26.8 - stylus: ^0.55.0 - sugarss: ^2.0.0 || ^3.0.0 || ^4.0.0 - svelte: ^3.23.0 || ^4.0.0-next.0 || ^4.0.0 - typescript: '>=3.9.5 || ^4.0.0 || ^5.0.0' - peerDependenciesMeta: - '@babel/core': - optional: true - coffeescript: - optional: true - less: - optional: true - postcss: - optional: true - postcss-load-config: - optional: true - pug: - optional: true - sass: - optional: true - stylus: - optional: true - sugarss: - optional: true - typescript: - optional: true - dependencies: - '@babel/core': 7.23.3 - '@types/pug': 2.0.9 - detect-indent: 6.1.0 - less: 4.2.0 - magic-string: 0.27.0 - postcss: 8.4.27 - sorcery: 0.11.0 - strip-indent: 3.0.0 - svelte: 4.2.3 - typescript: 5.2.2 - dev: true /svelte-range-slider-pips@2.0.1: resolution: {integrity: sha512-sCHvcTgi0ZYE4c/mwSsdALRsfuqEmpwTsSUdL+PUrumZ8u2gv1GKwZ3GohcAcTB6gfmqRBkyn6ujRXrOIga1gw==}