diff --git a/app/components/tag_list_input_component/tag_list_input_controller.js b/app/components/tag_list_input_component/tag_list_input_controller.js
index ccc4be5f95..094e3cca4a 100644
--- a/app/components/tag_list_input_component/tag_list_input_controller.js
+++ b/app/components/tag_list_input_component/tag_list_input_controller.js
@@ -8,12 +8,12 @@ export default class extends Controller {
     // prevent hotkey form submitting the form (default action for "enter" key)
     event.preventDefault();
 
-    // Check if tag already exist
-    const newTagName = this.newTagTarget.value.trim();
+    const newTagName = this.newTagTarget.value.trim().replaceAll(" ", "-");
     if (newTagName.length == 0) {
       return;
     }
 
+    // Check if tag already exist
     const tags = this.tagListTarget.value.split(",");
     const index = tags.indexOf(newTagName);
     if (index != -1) {
diff --git a/spec/javascripts/stimulus/tag_list_input_controller_test.js b/spec/javascripts/stimulus/tag_list_input_controller_test.js
index 1f72bcf22c..91ed014be9 100644
--- a/spec/javascripts/stimulus/tag_list_input_controller_test.js
+++ b/spec/javascripts/stimulus/tag_list_input_controller_test.js
@@ -16,7 +16,7 @@ describe("TagListInputController", () => {
     document.body.innerHTML = `
       <div data-controller="tag-list-input">
         <input 
-          value="tag 1,tag 2,tag 3" 
+          value="tag-1,tag-2,tag-3" 
           data-tag-list-input-target="tagList" 
           type="hidden" 
           name="variant_tag_list" id="variant_tag_list"
@@ -37,7 +37,7 @@ describe("TagListInputController", () => {
               </template>
               <li class="tag-item">
                 <div class="tag-template">
-                  <span>tag 1</span>
+                  <span>tag-1</span>
                   <a 
                     class="remove-button" 
                     data-action="click->tag-list-input#removeTag"
@@ -46,7 +46,7 @@ describe("TagListInputController", () => {
               </li>
               <li class="tag-item">
                 <div class="tag-template">
-                  <span>tag 2</span>
+                  <span>tag-2</span>
                   <a 
                     class="remove-button" 
                     data-action="click->tag-list-input#removeTag"
@@ -55,7 +55,7 @@ describe("TagListInputController", () => {
               </li>
               <li class="tag-item">
                 <div class="tag-template">
-                  <span>tag 3</span>
+                  <span>tag-3</span>
                   <a 
                     class="remove-button" 
                     data-action="click->tag-list-input#removeTag"
@@ -83,7 +83,7 @@ describe("TagListInputController", () => {
     });
 
     it("updates the hidden input tag list", () => {
-      expect(variant_tag_list.value).toBe("tag 1,tag 2,tag 3,new_tag");
+      expect(variant_tag_list.value).toBe("tag-1,tag-2,tag-3,new_tag");
     });
 
     it("adds the new tag to the HTML tag list", () => {
@@ -97,6 +97,22 @@ describe("TagListInputController", () => {
       expect(variant_add_tag.value).toBe("");
     });
 
+    describe("with a tag with spaces", () => {
+      it("replaces spaces by -", () => {
+        variant_add_tag.value = "tag other";
+        variant_add_tag.dispatchEvent(new KeyboardEvent("keydown", { key: "Enter" }));
+
+        const tagList = document.getElementsByClassName("tag-list")[0];
+
+        // 1 template + 3 tags + new tag (added in the beforeEach) + tag other
+        expect(tagList.childElementCount).toBe(6);
+        // Get the last span which is the last added tag
+        const spans = document.getElementsByTagName("span");
+        const span = spans.item(spans.length - 1);
+        expect(span.innerText).toBe("tag-other");
+      });
+    });
+
     describe("with an empty new tag", () => {
       it("doesn't add the tag", () => {
         variant_add_tag.value = " ";
@@ -193,12 +209,12 @@ describe("TagListInputController", () => {
   describe("removeTag", () => {
     beforeEach(() => {
       const removeButtons = document.getElementsByClassName("remove-button");
-      // Click on tag 2
+      // Click on tag-2
       removeButtons[1].click();
     });
 
     it("updates the hidden input tag list", () => {
-      expect(variant_tag_list.value).toBe("tag 1,tag 3");
+      expect(variant_tag_list.value).toBe("tag-1,tag-3");
     });
 
     it("removes the tag from the HTML tag list", () => {
@@ -237,7 +253,7 @@ describe("TagListInputController", () => {
                   </template>
                   <li class="tag-item">
                     <div class="tag-template">
-                      <span>tag 1</span>
+                      <span>tag-1</span>
                       <a 
                         class="remove-button" 
                         data-action="click->tag-list-input#removeTag"
diff --git a/spec/system/admin/products_v3/update_spec.rb b/spec/system/admin/products_v3/update_spec.rb
index 58e81aa5a5..76e96b60eb 100644
--- a/spec/system/admin/products_v3/update_spec.rb
+++ b/spec/system/admin/products_v3/update_spec.rb
@@ -92,7 +92,7 @@ RSpec.describe 'As an enterprise user, I can update my products' do
         .and change{ variant_a1.on_hand }.to(6)
         .and change{ variant_a1.variant_unit }.to("volume")
         .and change{ variant_a1.variant_unit_scale }.to(0.001)
-        .and change{ variant_a1.tag_list }.to(["tag one"])
+        .and change{ variant_a1.tag_list }.to(["tag-one"])
 
       within row_containing_name("Pommes") do
         expect(page).to have_field "Name", with: "Pommes"