diff --git a/resources/ts/club/components/club/shop/RecapComponent.vue b/resources/ts/club/components/club/shop/RecapComponent.vue
index 3fdf4189..f291facf 100644
--- a/resources/ts/club/components/club/shop/RecapComponent.vue
+++ b/resources/ts/club/components/club/shop/RecapComponent.vue
@@ -25,6 +25,7 @@
                 id="userCivility"
                 class="form-select"
                 :aria-label="trans.methods.__('Choisir la civilité dans la liste déroulante')"
+                @change="setCivility($event)"
               >
                 <option
                   :value="null"
@@ -37,7 +38,6 @@
                   v-for="civility in currentShop.civility"
                   :key="civility.value"
                   :value="civility.value"
-                  @click="setCivility(civility.value)"
                 >
                   {{ civility.label }}
                 </option>
@@ -109,6 +109,7 @@
                 id="userCivility"
                 class="form-select"
                 :aria-label="trans.methods.__('Choisir la civilité dans la liste déroulante')"
+                @change="setShippingCivility($event)"
               >
                 <option
                   :value="null"
@@ -121,7 +122,6 @@
                   v-for="civility in currentShop.civility"
                   :key="civility.value"
                   :value="civility.value"
-                  @click="setShippingCivility(civility.value)"
                 >
                   {{ civility.label }}
                 </option>
@@ -494,20 +494,26 @@ function selectPayement(payment: number): void {
 
 /**
   * Add specific item to the customer cart.
-  * @param civility "{label: string, value: number}"
+  * e.target.value = "{label: string, value: number}"
+  *
+  * @param e Event
   * @return void
   */
-function setCivility(civility: number): void {
-  form.value.coords.civility = civility;
+function setCivility(e: Event): void {
+  const input = e.target as HTMLOptionElement;
+  form.value.coords.civility = parseInt(input.value);
 }
 
 /**
   * Add specific item to the customer cart.
-  * @param civility "{label: string, value: number}"
+  * e.target.value = "{label: string, value: number}"
+  *
+  * @param e Event
   * @return void
   */
-function setShippingCivility(civility: number): void {
-  form.value.shipping!.civility = civility;
+function setShippingCivility(e: Event): void {
+  const input = e.target as HTMLOptionElement;
+  form.value.shipping!.civility = parseInt(input.value);
 }
 
 /**