diff --git a/src/modules/04_registryPerson/components/DialogHistory.vue b/src/modules/04_registryPerson/components/DialogHistory.vue
index 37ecbab91..d71af7ea4 100644
--- a/src/modules/04_registryPerson/components/DialogHistory.vue
+++ b/src/modules/04_registryPerson/components/DialogHistory.vue
@@ -304,11 +304,11 @@ function closeDialog() {
 
               <q-space />
               <q-btn
+                outline
                 color="primary"
-                icon="mdi-magnify"
                 label="ค้นหา"
-                outlined
                 @click="clickSearch(employeeClass)"
+                icon="mdi-magnify"
               />
             </q-toolbar>
           </div>
diff --git a/src/modules/04_registryPerson/components/detail/Achievement/01_ProfessionalLicense.vue b/src/modules/04_registryPerson/components/detail/Achievement/01_ProfessionalLicense.vue
index 744f08bf3..bd7a08a8e 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/01_ProfessionalLicense.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/01_ProfessionalLicense.vue
@@ -32,7 +32,7 @@ const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 /**
  * props
  */
- const isLeave = defineModel<boolean>("isLeave", {
+const isLeave = defineModel<boolean>("isLeave", {
   required: true,
 });
 
@@ -251,6 +251,7 @@ function closeDialog() {
 function closeHistoryDialog() {
   historyDialog.value = false;
   historyRows.value = [];
+  historyKeyword.value = "";
 }
 
 /**
@@ -410,7 +411,6 @@ onMounted(() => {
       map-options
       :options="columns"
       option-value="name"
-      
       style="min-width: 140px"
     />
 
@@ -456,7 +456,7 @@ onMounted(() => {
     bordered
     :paging="true"
     dense
-    :filter="keyword"
+    :filter="keyword.trim()"
     v-model:pagination="pagination"
     :rows-per-page-options="[20, 50, 100]"
     class="custom-header-table"
@@ -748,7 +748,6 @@ onMounted(() => {
             map-options
             :options="historyColumns"
             option-value="name"
-            
             style="min-width: 140px"
           />
         </div>
@@ -758,7 +757,7 @@ onMounted(() => {
           :rows="historyRows"
           row-key="name"
           flat
-          :filter="historyKeyword"
+          :filter="historyKeyword.trim()"
           v-model:pagination="historyPagination"
           bordered
           :paging="true"
diff --git a/src/modules/04_registryPerson/components/detail/Achievement/02_Train.vue b/src/modules/04_registryPerson/components/detail/Achievement/02_Train.vue
index 727803f73..16bd44c53 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/02_Train.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/02_Train.vue
@@ -482,6 +482,7 @@ function closeDialog() {
 function closeHistoryDialog() {
   historyDialog.value = false;
   historyRows.value = [];
+  historyKeyword.value = "";
 }
 
 /**
@@ -566,7 +567,6 @@ onMounted(() => {
       map-options
       :options="columns"
       option-value="name"
-      
       style="min-width: 140px"
     />
 
@@ -612,7 +612,7 @@ onMounted(() => {
     bordered
     :paging="true"
     dense
-    :filter="keyword"
+    :filter="keyword.trim()"
     :rows-per-page-options="[20, 50, 100]"
     v-model:pagination="pagination"
     class="custom-header-table"
@@ -642,9 +642,7 @@ onMounted(() => {
             <q-tooltip>ประวัติแก้ไขการฝึกอบรม/ดูงาน</q-tooltip>
           </q-btn>
           <q-btn
-            v-if="
-              isLeave == false && checkPermission($route)?.attrIsUpdate
-            "
+            v-if="isLeave == false && checkPermission($route)?.attrIsUpdate"
             flat
             dense
             round
@@ -684,9 +682,7 @@ onMounted(() => {
               <q-tooltip>ประวัติแก้ไขการฝึกอบรม/ดูงาน</q-tooltip>
             </q-btn>
             <q-btn
-              v-if="
-                isLeave == false && checkPermission($route)?.attrIsUpdate
-              "
+              v-if="isLeave == false && checkPermission($route)?.attrIsUpdate"
               flat
               round
               color="edit"
@@ -1136,7 +1132,6 @@ onMounted(() => {
             map-options
             :options="historyColumns"
             option-value="name"
-            
             style="min-width: 140px"
           />
         </div>
@@ -1146,7 +1141,7 @@ onMounted(() => {
           :rows="historyRows"
           row-key="name"
           flat
-          :filter="historyKeyword"
+          :filter="historyKeyword.trim()"
           v-model:pagination="historyPagination"
           bordered
           :paging="true"
diff --git a/src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue b/src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue
index 0188fb7f7..452b1f23b 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/03_Insignia.vue
@@ -73,6 +73,8 @@ const modalHistory = ref<boolean>(false); //แสดง popup ประวั
 const OpsFilter = ref<InsigniaOps>({
   insigniaOptions: [],
 });
+
+const insigniaOptions = ref<any[]>([]);
 //ต้วลือกรายการครื่องราช
 const Ops = ref<InsigniaOps>({
   insigniaOptions: [],
@@ -600,7 +602,7 @@ function filterSelector(val: string, update: Function, refData: string) {
   switch (refData) {
     case "insigniaOptions":
       update(() => {
-        Ops.value.insigniaOptions = OpsFilter.value.insigniaOptions.filter(
+        insigniaOptions.value = OpsFilter.value.insigniaOptions.filter(
           (v: DataOption) => v.name.indexOf(val) > -1
         );
       });
@@ -650,6 +652,7 @@ onMounted(async () => {
   store.insigniaOption.length === 0 ? await fetchInsignia() : "";
   Ops.value.insigniaOptions = store.insigniaOption;
   OpsFilter.value.insigniaOptions = store.insigniaOption;
+  insigniaOptions.value = store.insigniaOption;
 });
 </script>
 
@@ -677,18 +680,7 @@ onMounted(async () => {
       debounce="300"
     >
       <template v-slot:append>
-        <q-icon
-          v-if="filterSearch == ''"
-          name="search"
-          @click.stop.prevent="filterSearch = ''"
-          class="cursor-pointer"
-        />
-        <q-icon
-          v-if="filterSearch"
-          name="cancel"
-          @click.stop.prevent="filterSearch = ''"
-          class="cursor-pointer"
-        />
+        <q-icon name="search" />
       </template>
     </q-input>
     <q-select
@@ -703,7 +695,6 @@ onMounted(async () => {
       map-options
       :options="columns"
       option-value="name"
-      
       style="min-width: 140px"
     />
     <q-btn-toggle
@@ -745,7 +736,7 @@ onMounted(async () => {
     :rows="rows"
     :paging="true"
     :columns="columns"
-    :filter="filterSearch"
+    :filter="filterSearch.trim()"
     v-model:pagination="pagination"
     :grid="modeView === 'card'"
     :visible-columns="visibleColumns"
@@ -776,9 +767,7 @@ onMounted(async () => {
           </q-btn>
 
           <q-btn
-            v-if="
-              isLeave == false && checkPermission($route)?.attrIsUpdate
-            "
+            v-if="isLeave == false && checkPermission($route)?.attrIsUpdate"
             flat
             dense
             round
@@ -811,9 +800,7 @@ onMounted(async () => {
               <q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
             </q-btn>
             <q-btn
-              v-if="
-                isLeave == false && checkPermission($route)?.attrIsUpdate
-              "
+              v-if="isLeave == false && checkPermission($route)?.attrIsUpdate"
               flat
               round
               color="edit"
@@ -945,10 +932,12 @@ onMounted(async () => {
               </datepicker>
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
-              <selector
+              <q-select
                 dense
                 outlined
                 use-input
+                hide-selected
+                fill-input
                 emit-value
                 lazy-rules
                 map-options
@@ -959,13 +948,21 @@ onMounted(async () => {
                 v-model="insigniaForm.insigniaId"
                 class="inputgreen"
                 :label="`${'ชื่อเครื่องราชฯ'}`"
-                :options="Ops.insigniaOptions"
+                :options="insigniaOptions"
                 :rules="[(val:string) => !!val || `${'กรุณาเลือกชื่อเครื่องราชฯ'}`]"
                 @filter="(inputValue:string,
                     doneFn:Function) => filterSelector(inputValue, doneFn,'insigniaOptions'
                     ) "
                 @update:modelValue="insigniaTypeSelection"
-              />
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
               <q-input
@@ -1165,7 +1162,11 @@ onMounted(async () => {
     <q-card style="min-width: 80%">
       <DialogHeader
         tittle="ประวัติแก้ไขเครื่องราชอิสริยาภรณ์"
-        :close="() => ((modalHistory = false), (rowsHistory = []))"
+        :close="
+          () => (
+            (modalHistory = false), (rowsHistory = []), (filterHistory = '')
+          )
+        "
       />
       <q-separator />
 
@@ -1182,18 +1183,7 @@ onMounted(async () => {
             debounce="300"
           >
             <template v-slot:append>
-              <q-icon
-                v-if="filterHistory == ''"
-                name="search"
-                @click.stop.prevent="filterHistory = ''"
-                class="cursor-pointer"
-              />
-              <q-icon
-                v-if="filterHistory"
-                name="cancel"
-                @click.stop.prevent="filterHistory = ''"
-                class="cursor-pointer"
-              />
+              <q-icon name="search" />
             </template>
           </q-input>
           <q-select
@@ -1207,7 +1197,6 @@ onMounted(async () => {
             map-options
             :options="columnsHistory"
             option-value="name"
-            
             style="min-width: 140px"
           />
         </div>
@@ -1222,7 +1211,7 @@ onMounted(async () => {
           :paging="true"
           :rows-per-page-options="[10, 25, 50, 100]"
           :visible-columns="visibleColumnsHistory"
-          :filter="filterHistory"
+          :filter="filterHistory.trim()"
         >
           >
           <template v-slot:header="props">
diff --git a/src/modules/04_registryPerson/components/detail/Achievement/04_DeclarationHonor.vue b/src/modules/04_registryPerson/components/detail/Achievement/04_DeclarationHonor.vue
index fcec369d6..62550f406 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/04_DeclarationHonor.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/04_DeclarationHonor.vue
@@ -35,7 +35,7 @@ const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
 /**
  * props
  */
- const isLeave = defineModel<boolean>("isLeave", {
+const isLeave = defineModel<boolean>("isLeave", {
   required: true,
 });
 
@@ -393,18 +393,7 @@ onMounted(() => {
       debounce="300"
     >
       <template v-slot:append>
-        <q-icon
-          v-if="filterSearch == ''"
-          name="search"
-          @click.stop.prevent="filterSearch = ''"
-          class="cursor-pointer"
-        />
-        <q-icon
-          v-if="filterSearch"
-          name="cancel"
-          @click.stop.prevent="filterSearch = ''"
-          class="cursor-pointer"
-        />
+        <q-icon name="search" />
       </template>
     </q-input>
     <q-select
@@ -419,7 +408,6 @@ onMounted(() => {
       map-options
       :options="columns"
       option-value="name"
-      
       style="min-width: 140px"
     />
     <q-btn-toggle
@@ -461,7 +449,7 @@ onMounted(() => {
     :rows="rows"
     :paging="true"
     :columns="columns"
-    :filter="filterSearch"
+    :filter="filterSearch.trim()"
     :grid="modeView === 'card'"
     v-model:pagination="pagination"
     :visible-columns="visibleColumns"
@@ -778,7 +766,11 @@ onMounted(() => {
       <q-card-section class="flex justify-between" style="padding: 0">
         <DialogHeader
           tittle="ประวัติแก้ไขประกาศเกียรติคุณ"
-          :close="() => ((modalHistory = false), (rowsHistory = []))"
+          :close="
+            () => (
+              (modalHistory = false), (rowsHistory = []), (filterHistory = '')
+            )
+          "
         />
       </q-card-section>
 
@@ -796,18 +788,7 @@ onMounted(() => {
             debounce="300"
           >
             <template v-slot:append>
-              <q-icon
-                v-if="filterHistory == ''"
-                name="search"
-                @click.stop.prevent="filterHistory = ''"
-                class="cursor-pointer"
-              />
-              <q-icon
-                v-if="filterHistory"
-                name="cancel"
-                @click.stop.prevent="filterHistory = ''"
-                class="cursor-pointer"
-              />
+              <q-icon name="search" />
             </template>
           </q-input>
           <q-select
@@ -821,7 +802,6 @@ onMounted(() => {
             map-options
             :options="columnsHistory"
             option-value="name"
-            
             style="min-width: 140px"
           />
         </div>
@@ -836,7 +816,7 @@ onMounted(() => {
           v-model:pagination="historyPagination"
           :rows-per-page-options="[10, 25, 50, 100]"
           :visible-columns="visibleColumnsHistory"
-          :filter="filterHistory"
+          :filter="filterHistory.trim()"
         >
           >
           <template v-slot:header="props">
diff --git a/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue b/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue
index 02ad096a4..cce6ecedb 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/05_ResultsPerformance.vue
@@ -49,7 +49,7 @@ const kpiDevelopmentId = ref<string>(""); // id การพัฒนารา
 /**
  * props
  */
- const isLeave = defineModel<boolean>("isLeave", {
+const isLeave = defineModel<boolean>("isLeave", {
   required: true,
 });
 
@@ -419,16 +419,19 @@ async function getDevelop(isLoad?: boolean) {
   await http
     .get(
       config.API.developMentPlan +
-        `/${profileId.value}?page=${paginationIdp.value.page}&pageSize=${paginationIdp.value.rowsPerPage}&searchKeyword=${filterSearchPlan.value}
+        `/${profileId.value}?page=${paginationIdp.value.page}&pageSize=${
+          paginationIdp.value.rowsPerPage
+        }&searchKeyword=${filterSearchPlan.value.trim()}
 `
     )
     .then((res) => {
       const data = res.data.result.data;
       totalListIdp.value = Math.ceil(
-        res.data.result.total / pagination.value.rowsPerPage
+        res.data.result.total / paginationIdp.value.rowsPerPage
       );
       totalIdp.value = res.data.result.total;
       rowsPlan.value = data;
+
       isLoad && hideLoader();
     })
     .catch((e) => {
@@ -608,18 +611,7 @@ onMounted(async () => {
               debounce="300"
             >
               <template v-slot:append>
-                <q-icon
-                  v-if="filterSearch == ''"
-                  name="search"
-                  @click.stop.prevent="filterSearch = ''"
-                  class="cursor-pointer"
-                />
-                <q-icon
-                  v-if="filterSearch"
-                  name="cancel"
-                  @click.stop.prevent="filterSearch = ''"
-                  class="cursor-pointer"
-                />
+                <q-icon name="search" />
               </template>
             </q-input>
             <q-select
@@ -634,7 +626,6 @@ onMounted(async () => {
               map-options
               :options="columns"
               option-value="name"
-              
               style="min-width: 140px"
             />
             <q-btn-toggle
@@ -678,7 +669,7 @@ onMounted(async () => {
             :rows="rows"
             :paging="true"
             :columns="columns"
-            :filter="filterSearch"
+            :filter="filterSearch.trim()"
             v-model:pagination="pagination"
             :grid="modeView === 'card'"
             :visible-columns="visibleColumns"
@@ -710,7 +701,9 @@ onMounted(async () => {
                     >
                   </q-btn>
                   <q-btn
-                    v-if="isLeave == false && checkPermission($route)?.attrIsUpdate"
+                    v-if="
+                      isLeave == false && checkPermission($route)?.attrIsUpdate
+                    "
                     flat
                     dense
                     round
@@ -745,7 +738,10 @@ onMounted(async () => {
                       >
                     </q-btn>
                     <q-btn
-                      v-if="isLeave == false && checkPermission($route)?.attrIsUpdate"
+                      v-if="
+                        isLeave == false &&
+                        checkPermission($route)?.attrIsUpdate
+                      "
                       flat
                       round
                       color="edit"
@@ -800,24 +796,12 @@ onMounted(async () => {
               ref="filterPlanRef"
               outlined
               placeholder="ค้นหา"
-              debounce="300"
-              @keydown.enter.prevent="getDevelop"
+              @keydown.enter.prevent="
+                (paginationIdp.page = 1), getDevelop(true)
+              "
             >
               <template v-slot:append>
-                <q-icon
-                  v-if="filterSearchPlan == ''"
-                  name="search"
-                  @click.stop.prevent="filterSearchPlan = ''"
-                  class="cursor-pointer"
-                />
-                <q-icon
-                  v-if="filterSearchPlan"
-                  name="cancel"
-                  @click.stop.prevent="
-                    (filterSearchPlan = ''), getDevelop(true)
-                  "
-                  class="cursor-pointer"
-                />
+                <q-icon name="search" />
               </template>
             </q-input>
             <q-select
@@ -832,7 +816,6 @@ onMounted(async () => {
               map-options
               :options="columnsPlan"
               option-value="name"
-              
               style="min-width: 140px"
             />
             <q-btn-toggle
@@ -1208,7 +1191,11 @@ onMounted(async () => {
     <q-card style="min-width: 80%">
       <DialogHeader
         tittle="ประวัติแก้ไขผลการประเมินการปฏิบัติราชการ"
-        :close="() => ((modalHistory = false), (rowsHistory = []))"
+        :close="
+          () => (
+            (modalHistory = false), (rowsHistory = []), (filterHistory = '')
+          )
+        "
       />
       <q-separator />
       <q-card-section style="max-height: 60vh" class="scroll">
@@ -1224,18 +1211,7 @@ onMounted(async () => {
             debounce="300"
           >
             <template v-slot:append>
-              <q-icon
-                v-if="filterHistory == ''"
-                name="search"
-                @click.stop.prevent="filterHistory = ''"
-                class="cursor-pointer"
-              />
-              <q-icon
-                v-if="filterHistory"
-                name="cancel"
-                @click.stop.prevent="filterHistory = ''"
-                class="cursor-pointer"
-              />
+              <q-icon name="search" />
             </template>
           </q-input>
           <q-select
@@ -1249,7 +1225,6 @@ onMounted(async () => {
             map-options
             :options="columnsHistory"
             option-value="name"
-            
             style="min-width: 140px"
           />
         </div>
@@ -1264,7 +1239,7 @@ onMounted(async () => {
           :paging="true"
           :rows-per-page-options="[10, 25, 50, 100]"
           :visible-columns="visibleColumnsHistory"
-          :filter="filterHistory"
+          :filter="filterHistory.trim()"
         >
           >
           <template v-slot:header="props">
diff --git a/src/modules/04_registryPerson/components/detail/Achievement/DialogDevelopmance.vue b/src/modules/04_registryPerson/components/detail/Achievement/DialogDevelopmance.vue
index abed59a50..3c20623b4 100644
--- a/src/modules/04_registryPerson/components/detail/Achievement/DialogDevelopmance.vue
+++ b/src/modules/04_registryPerson/components/detail/Achievement/DialogDevelopmance.vue
@@ -267,7 +267,6 @@ watch(
         <div class="row q-col-gutter-sm">
           <div class="col-3">
             <q-select
-              class="inputgreen"
               outlined
               dense
               label="ตัวเลือก"
@@ -305,7 +304,6 @@ watch(
                   outlined
                   hide-bottom-space
                   :rules="[(val:string) => !!val || `${'กรุณาเลือกปีงบประมาณ'}`,]"
-                  class="inputgreen"
                   :model-value="
                     formData.year === null ? null : Number(formData.year) + 543
                   "
@@ -328,7 +326,6 @@ watch(
               outlined
               dense
               :rules="[(val:string) => !!val || `${'กรุณาเลือกโครงการ/หลักสูตรการฝึกอบรม'}`,]"
-              class="inputgreen"
               label="โครงการ/หลักสูตรการฝึกอบรม"
               :options="projectOp"
               option-label="projectName"
@@ -475,7 +472,6 @@ watch(
               readonly
               type="textarea"
               dense
-              class="inputgreen"
               :rules="[(val:string) => !!val || `${'กรุณากรอกเป้าหมายการนำไปพัฒนางาน'}`,]"
               lazy-rules
               hide-bottom-space
@@ -497,7 +493,7 @@ watch(
                 </div>
                 <div class="col-8">
                   <q-input
-                    class="inputgreen"
+                    
                     v-model="formData.achievement10"
                     outlined
                     readonly
@@ -516,7 +512,7 @@ watch(
                 </div>
                 <div class="col-8">
                   <q-input
-                    class="inputgreen"
+               
                     v-model="formData.achievement5"
                     outlined
                     readonly
@@ -535,7 +531,6 @@ watch(
                 </div>
                 <div class="col-8">
                   <q-input
-                    class="inputgreen"
                     v-model="formData.achievement0"
                     outlined
                     readonly
diff --git a/src/modules/04_registryPerson/components/detail/Employee/01_DataEmployee.vue b/src/modules/04_registryPerson/components/detail/Employee/01_DataEmployee.vue
index b7d057fff..828e42508 100644
--- a/src/modules/04_registryPerson/components/detail/Employee/01_DataEmployee.vue
+++ b/src/modules/04_registryPerson/components/detail/Employee/01_DataEmployee.vue
@@ -36,7 +36,7 @@ const profileId = ref<string>(
 /**
  * props
  */
- const isLeave = defineModel<boolean>("isLeave", {
+const isLeave = defineModel<boolean>("isLeave", {
   required: true,
 });
 
@@ -283,7 +283,8 @@ function onClickHistory() {
       const data = res.data.result;
       rows.value = data.sort(
         (a: any, b: any) =>
-          new Date(b.lastUpdatedAt).getTime() - new Date(a.lastUpdatedAt).getTime()
+          new Date(b.lastUpdatedAt).getTime() -
+          new Date(a.lastUpdatedAt).getTime()
       );
     })
     .catch((err) => {
@@ -578,7 +579,7 @@ onMounted(() => {
     <q-card style="min-width: 80%">
       <DialogHeader
         tittle="ประวัติแก้ไขข้อมูลส่วนตัว"
-        :close="() => (modalHistory = false)"
+        :close="() => ((modalHistory = false), (filter = ''), (rows = []))"
       />
       <q-separator />
 
@@ -595,18 +596,7 @@ onMounted(() => {
             debounce="300"
           >
             <template v-slot:append>
-              <q-icon
-                v-if="filter == ''"
-                name="search"
-                @click.stop.prevent="filter = ''"
-                class="cursor-pointer"
-              />
-              <q-icon
-                v-if="filter"
-                name="cancel"
-                @click.stop.prevent="filter = ''"
-                class="cursor-pointer"
-              />
+              <q-icon name="search" />
             </template>
           </q-input>
           <q-select
@@ -620,7 +610,6 @@ onMounted(() => {
             map-options
             :options="columns"
             option-value="name"
-            
             style="min-width: 140px"
           />
         </div>
@@ -634,7 +623,7 @@ onMounted(() => {
           :rows="rows"
           :rows-per-page-options="[10, 25, 50, 100]"
           :visible-columns="visibleColumns"
-          :filter="filter"
+          :filter="filter.trim()"
         >
           >
           <template v-slot:header="props">
diff --git a/src/modules/04_registryPerson/components/detail/Employee/02_Employment.vue b/src/modules/04_registryPerson/components/detail/Employee/02_Employment.vue
index af76b281b..02192e6a6 100644
--- a/src/modules/04_registryPerson/components/detail/Employee/02_Employment.vue
+++ b/src/modules/04_registryPerson/components/detail/Employee/02_Employment.vue
@@ -247,20 +247,8 @@ onMounted(() => {
 
     <q-space />
     <div class="q-gutter-sm" style="display: flex">
-      <q-input outlined dense v-model="filter" label="ค้นหา">
-        <template v-slot:append>
-          <q-icon
-            v-if="filter == ''"
-            name="search"
-            @click.stop.prevent="filter = ''"
-            class="cursor-pointer"
-          />
-          <q-icon
-            v-if="filter"
-            name="cancel"
-            @click.stop.prevent="filter = ''"
-            class="cursor-pointer"
-          /> </template
+      <q-input outlined dense v-model="filter" label="ค้นหา" debounce="300">
+        <template v-slot:append> <q-icon name="search" /> </template
       ></q-input>
 
       <q-select
@@ -287,7 +275,7 @@ onMounted(() => {
       ref="table"
       :columns="columns?.slice(0, 2)"
       :rows="rows"
-      :filter="filter"
+      :filter="filter.trim()"
       row-key="dateEmployment"
       :paging="true"
       dense
@@ -431,7 +419,11 @@ onMounted(() => {
     <q-card style="min-width: 80%">
       <DialogHeader
         tittle="ประวัติแก้ไขข้อมูลส่วนตัว"
-        :close="() => (modalHistory = false)"
+        :close="
+          () => (
+            (modalHistory = false), (filterHistory = ''), (rowsHistory = [])
+          )
+        "
       />
       <q-separator />
 
@@ -447,18 +439,7 @@ onMounted(() => {
             debounce="300"
           >
             <template v-slot:append>
-              <q-icon
-                v-if="filterHistory == ''"
-                name="search"
-                @click.stop.prevent="filterHistory = ''"
-                class="cursor-pointer"
-              />
-              <q-icon
-                v-if="filterHistory"
-                name="cancel"
-                @click.stop.prevent="filterHistory = ''"
-                class="cursor-pointer"
-              />
+              <q-icon name="search" />
             </template>
           </q-input>
           <q-select
@@ -485,7 +466,7 @@ onMounted(() => {
           :rows="rowsHistory"
           :rows-per-page-options="[10, 25, 50, 100]"
           :visible-columns="visibleColumns"
-          :filter="filterHistory"
+          :filter="filterHistory.trim()"
         >
           >
           <template v-slot:header="props">
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/01_Info.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/01_Info.vue
index 6cc8999c2..773778ec1 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/01_Info.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/01_Info.vue
@@ -216,7 +216,7 @@ async function getData() {
     .then(async (res) => {
       const data = await res.data.result;
       console.log(data);
-      
+
       formMain.ocId = data.org ?? "-"; //สังกัด
       formMain.positionId = data.position ?? "-"; //ตำแหน่ง
       formMain.positionLine = data.positionField ?? "-"; //สายงาน
@@ -295,6 +295,7 @@ onMounted(() => {
   getData();
 });
 </script>
+
 <template>
   <div class="row">
     <q-space />
@@ -671,18 +672,7 @@ onMounted(() => {
             debounce="300"
           >
             <template v-slot:append>
-              <q-icon
-                v-if="filterKeyword == ''"
-                name="search"
-                @click.stop.prevent="filterKeyword = ''"
-                class="cursor-pointer"
-              />
-              <q-icon
-                v-if="filterKeyword"
-                name="cancel"
-                @click.stop.prevent="filterKeyword = ''"
-                class="cursor-pointer"
-              />
+              <q-icon name="search" />
             </template>
           </q-input>
           <q-select
@@ -696,7 +686,6 @@ onMounted(() => {
             map-options
             :options="columnsHistory"
             option-value="name"
-            
             style="min-width: 140px"
           />
         </div>
@@ -709,7 +698,7 @@ onMounted(() => {
           :paging="true"
           dense
           class="custom-header-table"
-          :filter="filterKeyword"
+          :filter="filterKeyword.trim()"
           :visible-columns="visibleColumnsHistory"
         >
           <template v-slot:header="props">
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/02_Discipline.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/02_Discipline.vue
index dbd516fcc..7ef3bee27 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/02_Discipline.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/02_Discipline.vue
@@ -372,18 +372,7 @@ onMounted(() => {
       debounce="300"
     >
       <template v-slot:append>
-        <q-icon
-          v-if="filterKeyword == ''"
-          name="search"
-          @click.stop.prevent="filterKeyword = ''"
-          class="cursor-pointer"
-        />
-        <q-icon
-          v-if="filterKeyword"
-          name="cancel"
-          @click.stop.prevent="filterKeyword = ''"
-          class="cursor-pointer"
-        />
+        <q-icon name="search" />
       </template>
     </q-input>
     <q-select
@@ -443,7 +432,7 @@ onMounted(() => {
     :columns="columns"
     :rows="rows"
     :paging="true"
-    :filter="filterKeyword"
+    :filter="filterKeyword.trim()"
     v-model:pagination="pagination"
     :rows-per-page-options="[10, 25, 50, 100]"
     :visible-columns="visibleColumns"
@@ -646,6 +635,8 @@ onMounted(() => {
                 :options="Ops.levelOptions"
                 option-value="id"
                 use-input
+                hide-selected
+                fill-input
                 clearable
                 hide-bottom-space
                 input-debounce="0"
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/02_DisciplineHistory.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/02_DisciplineHistory.vue
index 185f4fc84..c02e418b2 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/02_DisciplineHistory.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/02_DisciplineHistory.vue
@@ -210,18 +210,7 @@ watch(modal, (status) => {
             debounce="300"
           >
             <template v-slot:append>
-              <q-icon
-                v-if="filterKeyword == ''"
-                name="search"
-                @click.stop.prevent="filterKeyword = ''"
-                class="cursor-pointer"
-              />
-              <q-icon
-                v-if="filterKeyword"
-                name="cancel"
-                @click.stop.prevent="filterKeyword = ''"
-                class="cursor-pointer"
-              />
+              <q-icon name="search" />
             </template>
           </q-input>
           <q-select
@@ -235,7 +224,6 @@ watch(modal, (status) => {
             map-options
             :options="columns"
             option-value="name"
-            
             style="min-width: 140px"
           />
         </div>
@@ -250,7 +238,7 @@ watch(modal, (status) => {
           :rows-per-page-options="[10, 25, 50, 100]"
           :visible-columns="visibleColumns"
           v-model:pagination="historyPagination"
-          :filter="filterKeyword"
+          :filter="filterKeyword.trim()"
         >
           >
           <template v-slot:header="props">
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/03_Leave.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/03_Leave.vue
index 2fb40453c..3f3e18319 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/03_Leave.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/03_Leave.vue
@@ -470,18 +470,7 @@ onMounted(() => {
       debounce="300"
     >
       <template v-slot:append>
-        <q-icon
-          v-if="filterKeyword == ''"
-          name="search"
-          @click.stop.prevent="filterKeyword = ''"
-          class="cursor-pointer"
-        />
-        <q-icon
-          v-if="filterKeyword"
-          name="cancel"
-          @click.stop.prevent="filterKeyword = ''"
-          class="cursor-pointer"
-        />
+        <q-icon name="search" />
       </template>
     </q-input>
     <q-select
@@ -496,7 +485,6 @@ onMounted(() => {
       map-options
       :options="columns"
       option-value="name"
-      
       style="min-width: 140px"
     />
     <q-btn-toggle
@@ -530,6 +518,7 @@ onMounted(() => {
       </template>
     </q-btn-toggle>
   </div>
+
   <d-table
     ref="table"
     flat
@@ -543,7 +532,7 @@ onMounted(() => {
     v-model:pagination="pagination"
     :rows-per-page-options="[10, 25, 50, 100]"
     :visible-columns="visibleColumns"
-    :filter="filterKeyword"
+    :filter="filterKeyword.trim()"
   >
     >
     <template v-slot:header="props">
@@ -568,9 +557,7 @@ onMounted(() => {
             <q-tooltip>ประวัติแก้ไขการลา</q-tooltip>
           </q-btn>
           <q-btn
-            v-if="
-              isLeave == false && checkPermission($route)?.attrIsUpdate
-            "
+            v-if="isLeave == false && checkPermission($route)?.attrIsUpdate"
             flat
             dense
             round
@@ -615,10 +602,7 @@ onMounted(() => {
                 ><q-tooltip>ประวิติแก้ไขการลา</q-tooltip></q-btn
               >
               <q-btn
-                v-if="
-                  isLeave == false &&
-                  checkPermission($route)?.attrIsUpdate
-                "
+                v-if="isLeave == false && checkPermission($route)?.attrIsUpdate"
                 color="edit"
                 icon="edit"
                 flat
@@ -701,6 +685,8 @@ onMounted(() => {
                 :options="typeLeaveOption"
                 option-value="id"
                 use-input
+                hide-selected
+                fill-input
                 input-debounce="0"
                 @filter="(inputValue:string,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'typeLeaveOption'
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/03_LeaveHistory.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/03_LeaveHistory.vue
index bff6a9058..612a699a0 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/03_LeaveHistory.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/03_LeaveHistory.vue
@@ -253,18 +253,7 @@ watch(modal, (status) => {
             debounce="300"
           >
             <template v-slot:append>
-              <q-icon
-                v-if="filterKeyword == ''"
-                name="search"
-                @click.stop.prevent="filterKeyword = ''"
-                class="cursor-pointer"
-              />
-              <q-icon
-                v-if="filterKeyword"
-                name="cancel"
-                @click.stop.prevent="filterKeyword = ''"
-                class="cursor-pointer"
-              />
+              <q-icon name="search" />
             </template>
           </q-input>
           <q-select
@@ -278,7 +267,6 @@ watch(modal, (status) => {
             map-options
             :options="columns"
             option-value="name"
-            
             style="min-width: 140px"
           />
         </div>
@@ -293,7 +281,7 @@ watch(modal, (status) => {
           v-model:pagination="historyPagination"
           :rows-per-page-options="[10, 25, 50, 100]"
           :visible-columns="visibleColumns"
-          :filter="filterKeyword"
+          :filter="filterKeyword.trim()"
         >
           >
           <template v-slot:header="props">
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWork.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWork.vue
index f9bed18b9..6fc3d271d 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWork.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWork.vue
@@ -295,18 +295,7 @@ onMounted(() => {
       debounce="300"
     >
       <template v-slot:append>
-        <q-icon
-          v-if="filterKeyword == ''"
-          name="search"
-          @click.stop.prevent="filterKeyword = ''"
-          class="cursor-pointer"
-        />
-        <q-icon
-          v-if="filterKeyword"
-          name="cancel"
-          @click.stop.prevent="filterKeyword = ''"
-          class="cursor-pointer"
-        />
+        <q-icon name="search" />
       </template>
     </q-input>
     <q-select
@@ -321,7 +310,6 @@ onMounted(() => {
       map-options
       :options="columns"
       option-value="name"
-      
       style="min-width: 140px"
     />
     <q-btn-toggle
@@ -368,7 +356,7 @@ onMounted(() => {
     :paging="true"
     :rows-per-page-options="[10, 25, 50, 100]"
     :visible-columns="visibleColumns"
-    :filter="filterKeyword"
+    :filter="filterKeyword.trim()"
     v-model:pagination="pagination"
   >
     >
@@ -394,9 +382,7 @@ onMounted(() => {
             <q-tooltip>ประวัติแก้ไขปฏิบัติราชการพิเศษ</q-tooltip>
           </q-btn>
           <q-btn
-            v-if="
-              isLeave == false && checkPermission($route)?.attrIsUpdate
-            "
+            v-if="isLeave == false && checkPermission($route)?.attrIsUpdate"
             flat
             dense
             round
@@ -430,10 +416,7 @@ onMounted(() => {
                 ><q-tooltip>ประวัติแก้ไขปฏิบัติราชการพิเศษ</q-tooltip>
               </q-btn>
               <q-btn
-                v-if="
-                  isLeave == false &&
-                  checkPermission($route)?.attrIsUpdate
-                "
+                v-if="isLeave == false && checkPermission($route)?.attrIsUpdate"
                 color="edit"
                 icon="edit"
                 flat
diff --git a/src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWorkHistory.vue b/src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWorkHistory.vue
index d1c380bad..fbd4916b5 100644
--- a/src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWorkHistory.vue
+++ b/src/modules/04_registryPerson/components/detail/GovernmentInformation/04_PerformSpecialWorkHistory.vue
@@ -202,18 +202,7 @@ watch(modal, (status) => {
             debounce="300"
           >
             <template v-slot:append>
-              <q-icon
-                v-if="filterKeyword == ''"
-                name="search"
-                @click.stop.prevent="filterKeyword = ''"
-                class="cursor-pointer"
-              />
-              <q-icon
-                v-if="filterKeyword"
-                name="cancel"
-                @click.stop.prevent="filterKeyword = ''"
-                class="cursor-pointer"
-              />
+              <q-icon name="search" />
             </template>
           </q-input>
           <q-select
@@ -227,7 +216,6 @@ watch(modal, (status) => {
             map-options
             :options="columns"
             option-value="name"
-            
             style="min-width: 140px"
           />
         </div>
@@ -242,7 +230,7 @@ watch(modal, (status) => {
           v-model:pagination="historyPagination"
           :rows-per-page-options="[10, 25, 50, 100]"
           :visible-columns="visibleColumns"
-          :filter="filterKeyword"
+          :filter="filterKeyword.trim()"
         >
           >
           <template v-slot:header="props">
diff --git a/src/modules/04_registryPerson/components/detail/Other/01_OtherInformation.vue b/src/modules/04_registryPerson/components/detail/Other/01_OtherInformation.vue
index 4894b6d90..8d3564464 100644
--- a/src/modules/04_registryPerson/components/detail/Other/01_OtherInformation.vue
+++ b/src/modules/04_registryPerson/components/detail/Other/01_OtherInformation.vue
@@ -230,18 +230,7 @@ onMounted(() => {
       debounce="300"
     >
       <template v-slot:append>
-        <q-icon
-          v-if="filterKeyword == ''"
-          name="search"
-          @click.stop.prevent="filterKeyword = ''"
-          class="cursor-pointer"
-        />
-        <q-icon
-          v-if="filterKeyword"
-          name="cancel"
-          @click.stop.prevent="filterKeyword = ''"
-          class="cursor-pointer"
-        />
+        <q-icon name="search" />
       </template>
     </q-input>
     <q-select
@@ -301,7 +290,7 @@ onMounted(() => {
     :grid="mode === 'card'"
     :paging="true"
     :visible-columns="visibleColumns"
-    :filter="filterKeyword"
+    :filter="filterKeyword.trim()"
     :rows-per-page-options="[10, 25, 50, 100]"
   >
     <template v-slot:header="props">
diff --git a/src/modules/04_registryPerson/components/detail/Other/01_OtherInformationHistory.vue b/src/modules/04_registryPerson/components/detail/Other/01_OtherInformationHistory.vue
index 2bb2be225..7871612da 100644
--- a/src/modules/04_registryPerson/components/detail/Other/01_OtherInformationHistory.vue
+++ b/src/modules/04_registryPerson/components/detail/Other/01_OtherInformationHistory.vue
@@ -17,7 +17,7 @@ const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, date2Thai, pathRegistryEmp } =
   mixin;
 
-/** 
+/**
  * props
  */
 const modal = defineModel<boolean>("modal", { required: true });
@@ -120,6 +120,7 @@ watch(modal, (status) => {
   } else {
     filterKeyword.value = "";
     rows.value = [];
+    filterKeyword.value = "";
   }
 });
 </script>
@@ -143,18 +144,7 @@ watch(modal, (status) => {
             debounce="300"
           >
             <template v-slot:append>
-              <q-icon
-                v-if="filterKeyword == ''"
-                name="search"
-                @click.stop.prevent="filterKeyword = ''"
-                class="cursor-pointer"
-              />
-              <q-icon
-                v-if="filterKeyword"
-                name="cancel"
-                @click.stop.prevent="filterKeyword = ''"
-                class="cursor-pointer"
-              />
+              <q-icon name="search" />
             </template>
           </q-input>
           <q-select
@@ -168,7 +158,6 @@ watch(modal, (status) => {
             map-options
             :options="columns"
             option-value="name"
-            
             style="min-width: 140px"
           />
         </div>
@@ -182,7 +171,7 @@ watch(modal, (status) => {
           :paging="true"
           :rows-per-page-options="[10, 25, 50, 100]"
           :visible-columns="visibleColumns"
-          :filter="filterKeyword"
+          :filter="filterKeyword.trim()"
         >
           >
           <template v-slot:header="props">
diff --git a/src/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue b/src/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue
index 5b60efce9..953c23efb 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/01_Profile.vue
@@ -370,6 +370,7 @@ function onSubmit() {
  * function ดูข้อมูลประวัติแก้ไขข้อมูลส่วนตัว
  */
 async function clickHistory() {
+  showLoader();
   modalHistory.value = true;
   filterHistory.value = "";
   await http
@@ -877,22 +878,15 @@ onMounted(() => {
         <div class="row q-gutter-sm q-mb-sm">
           <q-space />
           <q-input
-            standout
             dense
             v-model="filterHistory"
             ref="filterRef"
             outlined
             placeholder="ค้นหา"
             debounce="300"
-            clearable
           >
             <template v-slot:append>
-              <q-icon
-                v-if="filterHistory == ''"
-                name="search"
-                @click.stop.prevent="filterHistory = ''"
-                class="cursor-pointer"
-              />
+              <q-icon name="search" />
             </template>
           </q-input>
           <q-select
@@ -942,10 +936,6 @@ onMounted(() => {
           </template>
         </d-table>
       </q-card-section>
-
-      <q-separator />
-
-      <q-card-actions align="right"> </q-card-actions>
     </q-card>
   </q-dialog>
 </template>
diff --git a/src/modules/04_registryPerson/components/detail/PersonalInformation/03_Address.vue b/src/modules/04_registryPerson/components/detail/PersonalInformation/03_Address.vue
index 81e4294f0..07d51b2e5 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/03_Address.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/03_Address.vue
@@ -482,6 +482,7 @@ function clickClose() {
 async function clickHistory() {
   showLoader();
   modalHistory.value = true;
+  filterHistory.value = "";
   await http
     .get(config.API.profileNewAddressHisById(profileId.value, empType.value))
     .then(async (res) => {
@@ -913,7 +914,6 @@ onMounted(async () => {
         <div class="row q-gutter-sm q-mb-sm">
           <q-space />
           <q-input
-            standout
             dense
             v-model="filterHistory"
             ref="filterRef"
@@ -922,18 +922,7 @@ onMounted(async () => {
             debounce="300"
           >
             <template v-slot:append>
-              <q-icon
-                v-if="filterHistory == ''"
-                name="search"
-                @click.stop.prevent="filterHistory = ''"
-                class="cursor-pointer"
-              />
-              <q-icon
-                v-if="filterHistory"
-                name="cancel"
-                @click.stop.prevent="filterHistory = ''"
-                class="cursor-pointer"
-              />
+              <q-icon name="search" />
             </template>
           </q-input>
           <q-select
diff --git a/src/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue b/src/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue
index 61ede94de..ff85ed0fb 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue
@@ -361,6 +361,7 @@ function closeDialog() {
   fromData.lastNameOld = "";
   fromData.statusMarital = "";
   rows.value = [];
+  filterHistory.value = "";
 }
 
 /**
@@ -423,11 +424,11 @@ function onOpenDialogForm(
  * @param type  ประเภทของบุคคล
  * @param id
  */
-function onOpenDialogHistory(type: string, id: string = "") {
+async function onOpenDialogHistory(type: string, id: string = "") {
   modalHistory.value = true;
   typeForm.value = type;
   const historyId = type === "children" ? id : profileId.value;
-  fetchHistory(historyId, type);
+  await fetchHistory(historyId, type);
 }
 
 /**
@@ -1081,7 +1082,6 @@ onMounted(async () => {
         <div class="row q-gutter-sm q-mb-sm">
           <q-space />
           <q-input
-            standout
             dense
             v-model="filterHistory"
             ref="filterRef"
@@ -1090,18 +1090,7 @@ onMounted(async () => {
             debounce="300"
           >
             <template v-slot:append>
-              <q-icon
-                v-if="filterHistory == ''"
-                name="search"
-                @click.stop.prevent="filterHistory = ''"
-                class="cursor-pointer"
-              />
-              <q-icon
-                v-if="filterHistory"
-                name="cancel"
-                @click.stop.prevent="filterHistory = ''"
-                class="cursor-pointer"
-              />
+              <q-icon name="search" />
             </template>
           </q-input>
           <q-select
diff --git a/src/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue b/src/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue
index ef14c02b6..8ed9a1e83 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/05_Education.vue
@@ -623,6 +623,7 @@ function closeDialog() {
  */
 function closeHistoryDialog() {
   historyDialog.value = false;
+  historyKeyword.value = "";
   historyRows.value = [];
 }
 
diff --git a/src/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue b/src/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue
index 762443516..be4b7725e 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/06_SpecialSkill.vue
@@ -339,6 +339,7 @@ function closeDialog() {
  */
 function closeHistoryDialog() {
   historyDialog.value = false;
+  historyKeyword.value = "";
   historyRows.value = [];
 }
 
@@ -381,7 +382,6 @@ onMounted(() => {
       map-options
       :options="columns"
       option-value="name"
-      
       style="min-width: 140px"
     />
     <q-btn-toggle
@@ -637,7 +637,6 @@ onMounted(() => {
             map-options
             :options="historyColumns"
             option-value="name"
-            
             style="min-width: 140px"
           />
         </q-toolbar>
diff --git a/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue b/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue
index 65c401f40..ff4aceb0c 100644
--- a/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue
+++ b/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalary.vue
@@ -644,13 +644,7 @@ onMounted(() => {
     <q-space />
     <q-input dense outlined v-model="keyword" label="ค้นหา" class="q-mr-sm">
       <template v-slot:append>
-        <q-icon v-if="keyword == ''" name="search" />
-        <q-icon
-          v-else
-          name="clear"
-          class="cursor-pointer"
-          @click="keyword = ''"
-        />
+        <q-icon name="search" />
       </template>
     </q-input>
 
@@ -674,7 +668,7 @@ onMounted(() => {
     flat
     bordered
     dense
-    :filter="keyword"
+    :filter="keyword.trim()"
     :columns="columns"
     :rows="rows"
     :paging="true"
@@ -851,12 +845,22 @@ onMounted(() => {
                 hide-bottom-space
                 emit-value
                 use-input
+                hide-selected
+                fill-input
                 input-debounce="0"
                 @update:modelValue="updatePos"
                 @filter="(inputValue: string,
                       doneFn: Function) => filterSelector(inputValue, doneFn, 'pos'
                       )"
-              />
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template></q-select
+              >
             </div>
 
             <div class="col-xs-12 col-sm-12 col-md-12">
@@ -892,13 +896,23 @@ onMounted(() => {
                 option-value="name"
                 hide-bottom-space
                 use-input
+                hide-selected
+                fill-input
                 input-debounce="0"
                 @update:model-value="updateSelectType"
                 :rules="empType == '' ? [(val: string) => !!val || 'กรุณาเลือกประเภทตำแหน่ง'  ]:[(val: string) => !!val ||  'กรุณาเลือกกลุ่มงาน' ]"
                 @filter="(inputValue: string,
                       doneFn: Function) => filterSelector(inputValue, doneFn, 'posType'
                       )"
-              />
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
             </div>
 
             <div class="col-xs-6 col-sm-6 col-md-4">
@@ -919,11 +933,20 @@ onMounted(() => {
                 option-value="name"
                 hide-bottom-space
                 use-input
+                hide-selected
+                fill-input
                 input-debounce="0"
                 @filter="(inputValue: string,
                         doneFn: Function) => filterSelector(inputValue, doneFn, 'posLevel'
                         )"
-              />
+                ><template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
             </div>
             <div class="col-md-4"></div>
 
@@ -943,12 +966,22 @@ onMounted(() => {
                 option-value="id"
                 hide-bottom-space
                 use-input
+                hide-selected
+                fill-input
                 clearable
                 input-debounce="0"
                 @filter="(inputValue: string,
                       doneFn: Function) => filterSelector(inputValue, doneFn, 'positionLine'
                       )"
-              />
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template></q-select
+              >
             </div>
 
             <div class="col-xs-6 col-sm-6 col-md-4" v-if="empType == ''">
@@ -967,12 +1000,22 @@ onMounted(() => {
                 option-value="id"
                 hide-bottom-space
                 use-input
+                hide-selected
+                fill-input
                 clearable
                 input-debounce="0"
                 @filter="(inputValue: string,
                       doneFn: Function) => filterSelector(inputValue, doneFn, 'positionPathSide'
                       )"
-              />
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
             </div>
 
             <div class="col-xs-6 col-sm-6 col-md-4" v-if="empType == ''">
@@ -991,12 +1034,22 @@ onMounted(() => {
                 option-value="id"
                 hide-bottom-space
                 use-input
+                hide-selected
+                fill-input
                 input-debounce="0"
                 clearable
                 @filter="(inputValue: string,
                     doneFn: Function) => filterSelector(inputValue, doneFn, 'positionExecutive'
                     )"
-              />
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
             </div>
 
             <div class="col-xs-6 col-sm-6 col-md-4">
@@ -1078,12 +1131,22 @@ onMounted(() => {
                 emit-value
                 hide-bottom-space
                 use-input
+                hide-selected
+                fill-input
                 input-debounce="0"
                 @update:modelValue="updateDoc"
                 @filter="(inputValue: string,
                         doneFn: Function) => filterSelector(inputValue, doneFn, 'doc'
                         )"
-              />
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template>
+              </q-select>
             </div>
 
             <div class="col-xs-12 col-sm-12 col-md-12">
diff --git a/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalaryHistory.vue b/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalaryHistory.vue
index 976f4c737..14284f7a9 100644
--- a/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalaryHistory.vue
+++ b/src/modules/04_registryPerson/components/detail/Salary/01_PositionSalaryHistory.vue
@@ -256,6 +256,7 @@ function fetchListHistory() {
  */
 function closeDialog() {
   modal.value = false;
+  keyword.value = "";
   rows.value = [];
 }
 
@@ -290,13 +291,7 @@ watch(
             class="q-mr-sm"
           >
             <template v-slot:append>
-              <q-icon v-if="keyword === ''" name="search" />
-              <q-icon
-                v-else
-                name="clear"
-                class="cursor-pointer"
-                @click="keyword = ''"
-              />
+              <q-icon name="search" />
             </template>
           </q-input>
 
@@ -311,7 +306,6 @@ watch(
             map-options
             :options="columns"
             option-value="name"
-            
             style="min-width: 140px"
           />
         </div>
@@ -321,7 +315,7 @@ watch(
           flat
           bordered
           dense
-          :filter="keyword"
+          :filter="keyword.trim()"
           :columns="columns"
           :rows="rows"
           :paging="true"
diff --git a/src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalary.vue b/src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalary.vue
index 4c8696af3..7a637fd0f 100644
--- a/src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalary.vue
+++ b/src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalary.vue
@@ -265,18 +265,7 @@ onMounted(() => {
       debounce="300"
     >
       <template v-slot:append>
-        <q-icon
-          v-if="keyword == ''"
-          name="search"
-          @click.stop.prevent="keyword = ''"
-          class="cursor-pointer"
-        />
-        <q-icon
-          v-if="keyword"
-          name="cancel"
-          @click.stop.prevent="keyword = ''"
-          class="cursor-pointer"
-        />
+        <q-icon name="search" />
       </template>
     </q-input>
     <q-select
@@ -291,7 +280,6 @@ onMounted(() => {
       map-options
       :options="columns"
       option-value="name"
-      
       style="min-width: 140px"
     />
     <q-btn-toggle
@@ -335,7 +323,7 @@ onMounted(() => {
     :columns="columns"
     :rows="rows"
     :paging="true"
-    :filter="keyword"
+    :filter="keyword.trim()"
     v-model:pagination="pagination"
     :rows-per-page-options="[20, 50, 100]"
     :visible-columns="visibleColumns"
@@ -363,9 +351,7 @@ onMounted(() => {
             <q-tooltip>ประวัติบันทึกวันที่ไม่ได้รับเงินเดือนฯ</q-tooltip>
           </q-btn>
           <q-btn
-            v-if="
-              isLeave == false && checkPermission($route)?.attrIsUpdate
-            "
+            v-if="isLeave == false && checkPermission($route)?.attrIsUpdate"
             flat
             dense
             round
@@ -397,9 +383,7 @@ onMounted(() => {
               <q-tooltip>ประวัติบันทึกวันที่ไม่ได้รับเงินเดือนฯ</q-tooltip>
             </q-btn>
             <q-btn
-              v-if="
-                isLeave == false && checkPermission($route)?.attrIsUpdate
-              "
+              v-if="isLeave == false && checkPermission($route)?.attrIsUpdate"
               flat
               round
               color="edit"
diff --git a/src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalaryHistory.vue b/src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalaryHistory.vue
index 5de633ecf..298c6383a 100644
--- a/src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalaryHistory.vue
+++ b/src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalaryHistory.vue
@@ -196,7 +196,6 @@ watch(modal, (status) => {
             map-options
             :options="columns"
             option-value="name"
-            
             style="min-width: 140px"
           />
         </div>
@@ -206,7 +205,7 @@ watch(modal, (status) => {
           flat
           bordered
           dense
-          :filter="filter"
+          :filter="filter.trim()"
           :columns="columns"
           :rows="rows"
           :paging="true"