front admin proximites is ok

src/assets/main.scss

@@ -1095,13 +1095,17 @@ figcaption[contenteditable="true"]{
   border: rgba(0,0,0,0.8) 2px solid;
 }
 
-.editable{
+@mixin editable-box{
   background: #eee;
   border: #eee 2px solid;
   border-radius: 5px;
   padding: 0.3em!important;
   margin: 1em 0 0;
+}
+
+.editable{
   font-size: 0.756em;
+  @include editable-box();
   &>*{ 
     display: inline-block!important;
     padding: 0!important;
@@ -1232,14 +1236,37 @@ ul.editable-files{
 }
 
 section.editable-proximites{
+  @include editable-box();
   margin-top: 1em;
   label{
     padding: 0!important;
   }
-  div.wrapper.editable{
-    margin:0; padding:0.5em !important;
+  em{
+    font-weight: 500;
+  }
+  div.wrapper{
+    ul{
+      li{
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        em{
+          flex:1 0 auto;
+          font-weight: 300;
+        }
+        svg.delete{
+          flex: 0 0 auto;
+          width:1.3em; 
+          cursor: pointer;
+          transition: all 0.3s ease-in-out;
+          &:hover{
+            color: #aaa;
+          }
+        }
+      }
+    }
     &>div.vue-simple-suggest{
-      display: block!important;
+      
     }
   }
 }

src/components/contents/TerrainDeVie.vue

@@ -24,6 +24,7 @@ import SvgIcon from '@jamescoyle/vue-icon';
 import { mdiChevronRight } from '@mdi/js';
 import { mdiChevronDown } from '@mdi/js';
 import { mdiStickerPlusOutline } from '@mdi/js';
+import { mdiCloseBox } from '@mdi/js';
 
 import ContentEditable from '@components/editable/ContentEditable.vue';
 import CheckboxEditable from '@components/editable/CheckboxEditable.vue';
@@ -50,7 +51,8 @@ export default {
       reloading_concernements: false,
       prox_default_values: [],
       prox_new_value: {},
-      prox_suggestions: []
+      prox_suggestions: [],
+      mdiCloseBox_path: mdiCloseBox,
     }
   },
   computed: {
@@ -420,6 +422,7 @@ export default {
     },
     onProximiteSelected(src_entite){
       console.log('onProximiteSelected', src_entite);
+      console.log('onProximiteSelected', this.prox_new_value);
       if (src_entite) {
         this.proxvaluetitle = src_entite.title;
         // get all the field_proximite values, we don't want to ersae everything
@@ -471,8 +474,14 @@ export default {
           console.log('REST patch entite new field_proximite', data)
           this.reloadProximites(src_id)
             .then(() => {
-              // TODO clear the autocomplete field 
-              this.prox_new_value = null;
+              if (this.$refs.simplesuggest) {
+                console.log('Proximites reloaded, $refs', this.$refs.simplesuggest);
+                // clear the autocomplete field 
+                this.$refs.simplesuggest.setText('');
+                this.$refs.simplesuggest.selected = null;
+                this.$refs.simplesuggest.isSelectedUpToDate = false;
+                this.$refs.simplesuggest.clearSuggestions();
+              }
             })
         })
         .catch(error => {
@@ -524,19 +533,27 @@ export default {
           class="editable-proximites"
           >
           <label>Mes proximités</label>
-          <div class="wrapper editable">
+          <div class="wrapper">
             <ul v-if="prox_default_values.length">
               <li v-for="(prox_entite, i) in prox_default_values" v-key="i">
                 <em>{{ prox_entite.title }}</em>
-                <span 
+                <!-- <span 
                   class="delete"
                   @click="deleteProximite(prox_entite)"
-                  >x</span>
+                  > -->
+                  <svg-icon
+                    type="mdi" 
+                    :path="mdiCloseBox_path"
+                    class="delete"
+                    @click="deleteProximite(prox_entite)"
+                    ></svg-icon>
+                <!-- </span> -->
               </li>
             </ul>
             <template v-if="prox_suggestions.length" >
               <span>Lier <em>{{ entite.title }}</em> a une de mes entitées</span>
               <VueSimpleSuggest
+                ref="simplesuggest"
                 mode="select"
                 :list="prox_suggestions"
                 v-model="prox_new_value"