From cbcf92194f330ba732a7e6ba71ef571ba149fc02 Mon Sep 17 00:00:00 2001
From: Luann Moreira <luann.curioso@ossystems.com.br>
Date: Thu, 11 Dec 2025 10:01:31 -0300
Subject: [PATCH] refactor(ui): simplify and validate items-per-page input
 handling

Moved validation logic for itemsPerPage into clearer functions.
Replaced internal state tracking with direct model updates.
Removed unnecessary outlined and center-affix props.
Updated tests and snapshots accordingly to match new behavior.
---
 .../AnnouncementList.spec.ts.snap             |  4 +-
 .../__snapshots__/index.spec.ts.snap          |  4 +-
 .../__snapshots__/index.spec.ts.snap          |  4 +-
 .../__snapshots__/index.spec.ts.snap          |  4 +-
 .../__snapshots__/index.spec.ts.snap          |  4 +-
 .../UserList/__snapshots__/index.spec.ts.snap |  4 +-
 .../__snapshots__/Announcements.spec.ts.snap  |  4 +-
 .../Device/__snapshots__/index.spec.ts.snap   |  4 +-
 .../__snapshots__/index.spec.ts.snap          |  4 +-
 .../__snapshots__/index.spec.ts.snap          |  4 +-
 .../Sessions/__snapshots__/index.spec.ts.snap |  4 +-
 .../Users/__snapshots__/index.spec.ts.snap    |  4 +-
 ui/src/components/Tables/DataTable.vue        | 87 ++++++++++---------
 .../__snapshots__/ConnectorList.spec.ts.snap  |  4 +-
 .../__snapshots__/ContainerList.spec.ts.snap  |  4 +-
 .../ContainerPendingList.spec.ts.snap         |  4 +-
 .../ContainerRejectList.spec.ts.snap          |  4 +-
 .../__snapshots__/DeviceList.spec.ts.snap     |  4 +-
 .../DevicePendingList.spec.ts.snap            |  4 +-
 .../DeviceRejectedList.spec.ts.snap           |  4 +-
 .../__snapshots__/PublicKeyList.spec.ts.snap  |  4 +-
 ui/tests/components/Tables/DataTable.spec.ts  |  5 +-
 .../Tags/__snapshots__/TagList.spec.ts.snap   |  4 +-
 .../__snapshots__/ApiKeyList.spec.ts.snap     |  4 +-
 .../FirewallRuleList.spec.ts.snap             |  4 +-
 .../__snapshots__/FirewallRules.spec.ts.snap  |  4 +-
 .../__snapshots__/PublicKeys.spec.ts.snap     |  4 +-
 .../views/__snapshots__/Sessions.spec.ts.snap |  4 +-
 28 files changed, 101 insertions(+), 95 deletions(-)

diff --git a/ui/admin/tests/unit/components/Announcement/AnnouncementList/__snapshots__/AnnouncementList.spec.ts.snap b/ui/admin/tests/unit/components/Announcement/AnnouncementList/__snapshots__/AnnouncementList.spec.ts.snap
index d80c86885e5..c269d816feb 100644
--- a/ui/admin/tests/unit/components/Announcement/AnnouncementList/__snapshots__/AnnouncementList.spec.ts.snap
+++ b/ui/admin/tests/unit/components/Announcement/AnnouncementList/__snapshots__/AnnouncementList.spec.ts.snap
@@ -73,7 +73,7 @@ exports[`Announcement List > Renders the component 1`] = `
       <div class="v-input v-input--horizontal v-input--hide-spin-buttons v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-input--plain-underlined v-combobox v-combobox--single mb-4 mr-1 w-100" data-test="ipp-combo">
         <!---->
         <div class="v-input__control">
-          <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-10" aria-owns="menu-v-10">
+          <div class="v-field v-field--active v-field--appended v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-10" aria-owns="menu-v-10">
             <div class="v-field__overlay"></div>
             <div class="v-field__loader">
               <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
@@ -97,7 +97,7 @@ exports[`Announcement List > Renders the component 1`] = `
               <div class="v-field__input" data-no-activator="">
                 <!---->
                 <!---->
-                <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-12" aria-expanded="false" aria-controls="menu-v-10" outlined="" value="10">
+                <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-12" aria-expanded="false" aria-controls="menu-v-10" value="10">
               </div>
               <!---->
             </div>
diff --git a/ui/admin/tests/unit/components/Device/DeviceList/__snapshots__/index.spec.ts.snap b/ui/admin/tests/unit/components/Device/DeviceList/__snapshots__/index.spec.ts.snap
index d47fa8f9430..560f7a599a0 100755
--- a/ui/admin/tests/unit/components/Device/DeviceList/__snapshots__/index.spec.ts.snap
+++ b/ui/admin/tests/unit/components/Device/DeviceList/__snapshots__/index.spec.ts.snap
@@ -90,7 +90,7 @@ exports[`Device List > Renders the component 1`] = `
         <div class="v-input v-input--horizontal v-input--hide-spin-buttons v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-input--plain-underlined v-combobox v-combobox--single mb-4 mr-1 w-100" data-test="ipp-combo">
           <!---->
           <div class="v-input__control">
-            <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-18" aria-owns="menu-v-18">
+            <div class="v-field v-field--active v-field--appended v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-18" aria-owns="menu-v-18">
               <div class="v-field__overlay"></div>
               <div class="v-field__loader">
                 <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
@@ -114,7 +114,7 @@ exports[`Device List > Renders the component 1`] = `
                 <div class="v-field__input" data-no-activator="">
                   <!---->
                   <!---->
-                  <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-20" aria-expanded="false" aria-controls="menu-v-18" outlined="" value="10">
+                  <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-20" aria-expanded="false" aria-controls="menu-v-18" value="10">
                 </div>
                 <!---->
               </div>
diff --git a/ui/admin/tests/unit/components/FirewallRules/FirewallRulesList/__snapshots__/index.spec.ts.snap b/ui/admin/tests/unit/components/FirewallRules/FirewallRulesList/__snapshots__/index.spec.ts.snap
index b6038e5e08e..6a1e3beb1de 100644
--- a/ui/admin/tests/unit/components/FirewallRules/FirewallRulesList/__snapshots__/index.spec.ts.snap
+++ b/ui/admin/tests/unit/components/FirewallRules/FirewallRulesList/__snapshots__/index.spec.ts.snap
@@ -52,7 +52,7 @@ exports[`Firewall Rules List > Renders the component 1`] = `
       <div class="v-input v-input--horizontal v-input--hide-spin-buttons v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-input--plain-underlined v-combobox v-combobox--single mb-4 mr-1 w-100" data-test="ipp-combo">
         <!---->
         <div class="v-input__control">
-          <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-4" aria-owns="menu-v-4">
+          <div class="v-field v-field--active v-field--appended v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-4" aria-owns="menu-v-4">
             <div class="v-field__overlay"></div>
             <div class="v-field__loader">
               <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
@@ -76,7 +76,7 @@ exports[`Firewall Rules List > Renders the component 1`] = `
               <div class="v-field__input" data-no-activator="">
                 <!---->
                 <!---->
-                <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-6" aria-expanded="false" aria-controls="menu-v-4" outlined="" value="10">
+                <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-6" aria-expanded="false" aria-controls="menu-v-4" value="10">
               </div>
               <!---->
             </div>
diff --git a/ui/admin/tests/unit/components/Namespaces/NamespaceList/__snapshots__/index.spec.ts.snap b/ui/admin/tests/unit/components/Namespaces/NamespaceList/__snapshots__/index.spec.ts.snap
index ca75dfbbcec..8a242b46f16 100644
--- a/ui/admin/tests/unit/components/Namespaces/NamespaceList/__snapshots__/index.spec.ts.snap
+++ b/ui/admin/tests/unit/components/Namespaces/NamespaceList/__snapshots__/index.spec.ts.snap
@@ -57,7 +57,7 @@ exports[`Namespace List > Renders the component 1`] = `
         <div class="v-input v-input--horizontal v-input--hide-spin-buttons v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-input--plain-underlined v-combobox v-combobox--single mb-4 mr-1 w-100" data-test="ipp-combo">
           <!---->
           <div class="v-input__control">
-            <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-6" aria-owns="menu-v-6">
+            <div class="v-field v-field--active v-field--appended v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-6" aria-owns="menu-v-6">
               <div class="v-field__overlay"></div>
               <div class="v-field__loader">
                 <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
@@ -81,7 +81,7 @@ exports[`Namespace List > Renders the component 1`] = `
                 <div class="v-field__input" data-no-activator="">
                   <!---->
                   <!---->
-                  <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-8" aria-expanded="false" aria-controls="menu-v-6" outlined="" value="10">
+                  <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-8" aria-expanded="false" aria-controls="menu-v-6" value="10">
                 </div>
                 <!---->
               </div>
diff --git a/ui/admin/tests/unit/components/Session/SessionList/__snapshots__/index.spec.ts.snap b/ui/admin/tests/unit/components/Session/SessionList/__snapshots__/index.spec.ts.snap
index ba79edf4210..6eeff95ab64 100644
--- a/ui/admin/tests/unit/components/Session/SessionList/__snapshots__/index.spec.ts.snap
+++ b/ui/admin/tests/unit/components/Session/SessionList/__snapshots__/index.spec.ts.snap
@@ -105,7 +105,7 @@ exports[`Sessions List > Renders the component 1`] = `
         <div class="v-input v-input--horizontal v-input--hide-spin-buttons v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-input--plain-underlined v-combobox v-combobox--single mb-4 mr-1 w-100" data-test="ipp-combo">
           <!---->
           <div class="v-input__control">
-            <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-16" aria-owns="menu-v-16">
+            <div class="v-field v-field--active v-field--appended v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-16" aria-owns="menu-v-16">
               <div class="v-field__overlay"></div>
               <div class="v-field__loader">
                 <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
@@ -129,7 +129,7 @@ exports[`Sessions List > Renders the component 1`] = `
                 <div class="v-field__input" data-no-activator="">
                   <!---->
                   <!---->
-                  <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-18" aria-expanded="false" aria-controls="menu-v-16" outlined="" value="10">
+                  <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-18" aria-expanded="false" aria-controls="menu-v-16" value="10">
                 </div>
                 <!---->
               </div>
diff --git a/ui/admin/tests/unit/components/User/UserList/__snapshots__/index.spec.ts.snap b/ui/admin/tests/unit/components/User/UserList/__snapshots__/index.spec.ts.snap
index f58550be072..ad0a4978e18 100644
--- a/ui/admin/tests/unit/components/User/UserList/__snapshots__/index.spec.ts.snap
+++ b/ui/admin/tests/unit/components/User/UserList/__snapshots__/index.spec.ts.snap
@@ -60,7 +60,7 @@ exports[`UserList > Renders the component 1`] = `
       <div class="v-input v-input--horizontal v-input--hide-spin-buttons v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-input--plain-underlined v-combobox v-combobox--single mb-4 mr-1 w-100" data-test="ipp-combo">
         <!---->
         <div class="v-input__control">
-          <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-7" aria-owns="menu-v-7">
+          <div class="v-field v-field--active v-field--appended v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-7" aria-owns="menu-v-7">
             <div class="v-field__overlay"></div>
             <div class="v-field__loader">
               <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
@@ -84,7 +84,7 @@ exports[`UserList > Renders the component 1`] = `
               <div class="v-field__input" data-no-activator="">
                 <!---->
                 <!---->
-                <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-9" aria-expanded="false" aria-controls="menu-v-7" outlined="" value="10">
+                <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-9" aria-expanded="false" aria-controls="menu-v-7" value="10">
               </div>
               <!---->
             </div>
diff --git a/ui/admin/tests/unit/views/Announcements/__snapshots__/Announcements.spec.ts.snap b/ui/admin/tests/unit/views/Announcements/__snapshots__/Announcements.spec.ts.snap
index e39d32ad07b..9a85e859e14 100644
--- a/ui/admin/tests/unit/views/Announcements/__snapshots__/Announcements.spec.ts.snap
+++ b/ui/admin/tests/unit/views/Announcements/__snapshots__/Announcements.spec.ts.snap
@@ -57,7 +57,7 @@ exports[`Announcement Details > Renders the component 1`] = `
       <div class="v-input v-input--horizontal v-input--hide-spin-buttons v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-input--plain-underlined v-combobox v-combobox--single mb-4 mr-1 w-100" data-test="ipp-combo">
         <!---->
         <div class="v-input__control">
-          <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-6" aria-owns="menu-v-6">
+          <div class="v-field v-field--active v-field--appended v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-6" aria-owns="menu-v-6">
             <div class="v-field__overlay"></div>
             <div class="v-field__loader">
               <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
@@ -81,7 +81,7 @@ exports[`Announcement Details > Renders the component 1`] = `
               <div class="v-field__input" data-no-activator="">
                 <!---->
                 <!---->
-                <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-8" aria-expanded="false" aria-controls="menu-v-6" outlined="" value="10">
+                <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-8" aria-expanded="false" aria-controls="menu-v-6" value="10">
               </div>
               <!---->
             </div>
diff --git a/ui/admin/tests/unit/views/Device/__snapshots__/index.spec.ts.snap b/ui/admin/tests/unit/views/Device/__snapshots__/index.spec.ts.snap
index 805e9832b7f..841a03a0352 100644
--- a/ui/admin/tests/unit/views/Device/__snapshots__/index.spec.ts.snap
+++ b/ui/admin/tests/unit/views/Device/__snapshots__/index.spec.ts.snap
@@ -135,7 +135,7 @@ exports[`Device > Renders the component 1`] = `
         <div class="v-input v-input--horizontal v-input--hide-spin-buttons v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-input--plain-underlined v-combobox v-combobox--single mb-4 mr-1 w-100" data-test="ipp-combo">
           <!---->
           <div class="v-input__control">
-            <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-9" aria-owns="menu-v-9">
+            <div class="v-field v-field--active v-field--appended v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-9" aria-owns="menu-v-9">
               <div class="v-field__overlay"></div>
               <div class="v-field__loader">
                 <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
@@ -159,7 +159,7 @@ exports[`Device > Renders the component 1`] = `
                 <div class="v-field__input" data-no-activator="">
                   <!---->
                   <!---->
-                  <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-11" aria-expanded="false" aria-controls="menu-v-9" outlined="" value="10">
+                  <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-11" aria-expanded="false" aria-controls="menu-v-9" value="10">
                 </div>
                 <!---->
               </div>
diff --git a/ui/admin/tests/unit/views/FirewallRules/__snapshots__/index.spec.ts.snap b/ui/admin/tests/unit/views/FirewallRules/__snapshots__/index.spec.ts.snap
index 820ee17754e..7fe6d60f6d8 100644
--- a/ui/admin/tests/unit/views/FirewallRules/__snapshots__/index.spec.ts.snap
+++ b/ui/admin/tests/unit/views/FirewallRules/__snapshots__/index.spec.ts.snap
@@ -53,7 +53,7 @@ exports[`Firewall Rules > Renders the component 1`] = `
       <div class="v-input v-input--horizontal v-input--hide-spin-buttons v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-input--plain-underlined v-combobox v-combobox--single mb-4 mr-1 w-100" data-test="ipp-combo">
         <!---->
         <div class="v-input__control">
-          <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-0" aria-owns="menu-v-0">
+          <div class="v-field v-field--active v-field--appended v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-0" aria-owns="menu-v-0">
             <div class="v-field__overlay"></div>
             <div class="v-field__loader">
               <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
@@ -77,7 +77,7 @@ exports[`Firewall Rules > Renders the component 1`] = `
               <div class="v-field__input" data-no-activator="">
                 <!---->
                 <!---->
-                <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-2" aria-expanded="false" aria-controls="menu-v-0" outlined="" value="10">
+                <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-2" aria-expanded="false" aria-controls="menu-v-0" value="10">
               </div>
               <!---->
             </div>
diff --git a/ui/admin/tests/unit/views/Namespaces/__snapshots__/index.spec.ts.snap b/ui/admin/tests/unit/views/Namespaces/__snapshots__/index.spec.ts.snap
index 3b3fbad3c04..33001aa0798 100644
--- a/ui/admin/tests/unit/views/Namespaces/__snapshots__/index.spec.ts.snap
+++ b/ui/admin/tests/unit/views/Namespaces/__snapshots__/index.spec.ts.snap
@@ -83,7 +83,7 @@ exports[`Namespaces > Renders the component 1`] = `
         <div class="v-input v-input--horizontal v-input--hide-spin-buttons v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-input--plain-underlined v-combobox v-combobox--single mb-4 mr-1 w-100" data-test="ipp-combo">
           <!---->
           <div class="v-input__control">
-            <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-4" aria-owns="menu-v-4">
+            <div class="v-field v-field--active v-field--appended v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-4" aria-owns="menu-v-4">
               <div class="v-field__overlay"></div>
               <div class="v-field__loader">
                 <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
@@ -107,7 +107,7 @@ exports[`Namespaces > Renders the component 1`] = `
                 <div class="v-field__input" data-no-activator="">
                   <!---->
                   <!---->
-                  <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-6" aria-expanded="false" aria-controls="menu-v-4" outlined="" value="10">
+                  <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-6" aria-expanded="false" aria-controls="menu-v-4" value="10">
                 </div>
                 <!---->
               </div>
diff --git a/ui/admin/tests/unit/views/Sessions/__snapshots__/index.spec.ts.snap b/ui/admin/tests/unit/views/Sessions/__snapshots__/index.spec.ts.snap
index 33e04545ab8..86081f884c8 100644
--- a/ui/admin/tests/unit/views/Sessions/__snapshots__/index.spec.ts.snap
+++ b/ui/admin/tests/unit/views/Sessions/__snapshots__/index.spec.ts.snap
@@ -37,7 +37,7 @@ exports[`Sessions > Renders the component 1`] = `
         <div class="v-input v-input--horizontal v-input--hide-spin-buttons v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-input--plain-underlined v-combobox v-combobox--single mb-4 mr-1 w-100" data-test="ipp-combo">
           <!---->
           <div class="v-input__control">
-            <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-0" aria-owns="menu-v-0">
+            <div class="v-field v-field--active v-field--appended v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-0" aria-owns="menu-v-0">
               <div class="v-field__overlay"></div>
               <div class="v-field__loader">
                 <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
@@ -61,7 +61,7 @@ exports[`Sessions > Renders the component 1`] = `
                 <div class="v-field__input" data-no-activator="">
                   <!---->
                   <!---->
-                  <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-2" aria-expanded="false" aria-controls="menu-v-0" outlined="" value="10">
+                  <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-2" aria-expanded="false" aria-controls="menu-v-0" value="10">
                 </div>
                 <!---->
               </div>
diff --git a/ui/admin/tests/unit/views/Users/__snapshots__/index.spec.ts.snap b/ui/admin/tests/unit/views/Users/__snapshots__/index.spec.ts.snap
index e76bce7010a..a2e1b0cad2c 100644
--- a/ui/admin/tests/unit/views/Users/__snapshots__/index.spec.ts.snap
+++ b/ui/admin/tests/unit/views/Users/__snapshots__/index.spec.ts.snap
@@ -90,7 +90,7 @@ exports[`Users > Renders the component 1`] = `
       <div class="v-input v-input--horizontal v-input--hide-spin-buttons v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-input--plain-underlined v-combobox v-combobox--single mb-4 mr-1 w-100" data-test="ipp-combo">
         <!---->
         <div class="v-input__control">
-          <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-5" aria-owns="menu-v-5">
+          <div class="v-field v-field--active v-field--appended v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-5" aria-owns="menu-v-5">
             <div class="v-field__overlay"></div>
             <div class="v-field__loader">
               <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
@@ -114,7 +114,7 @@ exports[`Users > Renders the component 1`] = `
               <div class="v-field__input" data-no-activator="">
                 <!---->
                 <!---->
-                <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-7" aria-expanded="false" aria-controls="menu-v-5" outlined="" value="10">
+                <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-7" aria-expanded="false" aria-controls="menu-v-5" value="10">
               </div>
               <!---->
             </div>
diff --git a/ui/src/components/Tables/DataTable.vue b/ui/src/components/Tables/DataTable.vue
index 41da41e1499..ccfbb18dcfd 100644
--- a/ui/src/components/Tables/DataTable.vue
+++ b/ui/src/components/Tables/DataTable.vue
@@ -89,23 +89,20 @@
         class="pa-0"
       >
         <v-combobox
-          v-model="internalItemsPerPage"
-          v-model:menu="itemsPerPageMenuOpen"
+          :model-value="itemsPerPage"
           :items="itemsPerPageOptions"
-          outlined
+          :error-messages="itemsPerPageError"
           variant="underlined"
-          center-affix
           type="number"
           hide-spin-buttons
           hide-details="auto"
           hide-no-data
           class="mb-4 mr-1 w-100"
-          filter-mode="every"
           data-test="ipp-combo"
-          :rules="[validateItemsPerPage]"
-          @blur="sanitizeItemsPerPage"
-          @keydown.enter="sanitizeItemsPerPage"
-          @update:menu="handleItemsPerPageMenuChange"
+          @update:model-value="updateItemsPerPage"
+          @update:search="handleItemsPerPageSearch"
+          @blur="constrainItemsPerPage"
+          @keydown.enter="constrainItemsPerPage"
           @keydown="blockNonNumeric"
           @paste.prevent
         />
@@ -171,19 +168,13 @@ const page = defineModel<number>("page", {
   type: Number,
 });
 
-const rawItemsPerPage = defineModel<number>("itemsPerPage", {
+const itemsPerPage = defineModel<number>("itemsPerPage", {
   required: true,
   type: Number,
 });
 
-const internalItemsPerPage = ref(rawItemsPerPage.value);
-const itemsPerPageMenuOpen = ref(false);
-
-const pageQuantity = computed(() => Math.ceil(props.totalCount / rawItemsPerPage.value) || 1);
-
-const goToFirstPage = () => {
-  page.value = 1;
-};
+const itemsPerPageError = ref<string | null>(null);
+const pageQuantity = computed(() => Math.ceil(props.totalCount / itemsPerPage.value) || 1);
 
 const blockNonNumeric = (e: KeyboardEvent) => {
   const allowedKeys = [
@@ -198,42 +189,60 @@ const blockNonNumeric = (e: KeyboardEvent) => {
   ];
 
   if (allowedKeys.includes(e.key)) return;
-
   if (/^[0-9]$/.test(e.key)) return;
 
   e.preventDefault();
 };
 
-const validateItemsPerPage = (value: unknown): true | string => {
-  const num = Number(value);
+const clampItemsPerPage = (value: number) => Math.min(100, Math.max(1, value));
 
-  if (num < 1) return "Minimum is 1";
-  if (num > 100) return "Maximum is 100";
+const parseItemsPerPageValue = (value: unknown) => {
+  if (value === "" || value === null || value === undefined) return null;
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : null;
+};
 
-  return true;
+const applyItemsPerPageChange = (value: number) => {
+  if (value !== itemsPerPage.value) {
+    itemsPerPage.value = value;
+    page.value = 1;
+  }
+  itemsPerPageError.value = null;
 };
 
-const sanitizeItemsPerPage = () => {
-  let num = Number(internalItemsPerPage.value);
+const updateItemsPerPage = (value: number | string | null) => {
+  const parsed = parseItemsPerPageValue(value);
+  if (parsed === null) return;
 
-  if (isNaN(num) || num < 1) num = 1;
-  if (num > 100) num = 100;
+  if (parsed < 1) {
+    itemsPerPageError.value = "Minimum is 1";
+    return;
+  }
+  if (parsed > 100) {
+    itemsPerPageError.value = "Maximum is 100";
+    return;
+  }
 
-  const changed = rawItemsPerPage.value !== num;
+  applyItemsPerPageChange(parsed);
+};
 
-  rawItemsPerPage.value = num;
-  internalItemsPerPage.value = num;
+const handleItemsPerPageSearch = (value: string | number | null) => {
+  if (value === null || value === undefined) return;
+  updateItemsPerPage(value);
+};
 
-  if (changed) {
-    goToFirstPage();
+const readValueFromEvent = (value: unknown) => {
+  if (typeof value === "number" || typeof value === "string") return parseItemsPerPageValue(value);
+  if (typeof value === "object" && value !== null && "target" in value) {
+    const target = value.target as HTMLInputElement | null;
+    return target ? parseItemsPerPageValue(target.value) : null;
   }
+  return null;
 };
 
-const handleItemsPerPageMenuChange = (isOpen: boolean) => {
-  itemsPerPageMenuOpen.value = isOpen;
-
-  if (!isOpen) {
-    sanitizeItemsPerPage();
-  }
+const constrainItemsPerPage = (value?: number | string | FocusEvent | KeyboardEvent) => {
+  const parsed = readValueFromEvent(value);
+  const clamped = clampItemsPerPage(parsed ?? itemsPerPage.value);
+  applyItemsPerPageChange(clamped);
 };
 </script>
diff --git a/ui/tests/components/Connectors/__snapshots__/ConnectorList.spec.ts.snap b/ui/tests/components/Connectors/__snapshots__/ConnectorList.spec.ts.snap
index 4ecb2f5f6f4..f5a8750b358 100644
--- a/ui/tests/components/Connectors/__snapshots__/ConnectorList.spec.ts.snap
+++ b/ui/tests/components/Connectors/__snapshots__/ConnectorList.spec.ts.snap
@@ -94,7 +94,7 @@ exports[`Connector List > Renders the component 1`] = `
       <div class="v-input v-input--horizontal v-input--hide-spin-buttons v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-input--plain-underlined v-combobox v-combobox--single mb-4 mr-1 w-100" data-test="ipp-combo">
         <!---->
         <div class="v-input__control">
-          <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-10" aria-owns="menu-v-10">
+          <div class="v-field v-field--active v-field--appended v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-10" aria-owns="menu-v-10">
             <div class="v-field__overlay"></div>
             <div class="v-field__loader">
               <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
@@ -118,7 +118,7 @@ exports[`Connector List > Renders the component 1`] = `
               <div class="v-field__input" data-no-activator="">
                 <!---->
                 <!---->
-                <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-12" aria-expanded="false" aria-controls="menu-v-10" outlined="" value="10">
+                <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-12" aria-expanded="false" aria-controls="menu-v-10" value="10">
               </div>
               <!---->
             </div>
diff --git a/ui/tests/components/Containers/__snapshots__/ContainerList.spec.ts.snap b/ui/tests/components/Containers/__snapshots__/ContainerList.spec.ts.snap
index b5e489453e9..04b2f8d70fa 100644
--- a/ui/tests/components/Containers/__snapshots__/ContainerList.spec.ts.snap
+++ b/ui/tests/components/Containers/__snapshots__/ContainerList.spec.ts.snap
@@ -164,7 +164,7 @@ exports[`Container List > Renders the component 1`] = `
           <div class="v-input v-input--horizontal v-input--hide-spin-buttons v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-input--plain-underlined v-combobox v-combobox--single mb-4 mr-1 w-100" data-test="ipp-combo">
             <!---->
             <div class="v-input__control">
-              <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-30" aria-owns="menu-v-30">
+              <div class="v-field v-field--active v-field--appended v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-30" aria-owns="menu-v-30">
                 <div class="v-field__overlay"></div>
                 <div class="v-field__loader">
                   <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
@@ -188,7 +188,7 @@ exports[`Container List > Renders the component 1`] = `
                   <div class="v-field__input" data-no-activator="">
                     <!---->
                     <!---->
-                    <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-32" aria-expanded="false" aria-controls="menu-v-30" outlined="" value="10">
+                    <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-32" aria-expanded="false" aria-controls="menu-v-30" value="10">
                   </div>
                   <!---->
                 </div>
diff --git a/ui/tests/components/Containers/__snapshots__/ContainerPendingList.spec.ts.snap b/ui/tests/components/Containers/__snapshots__/ContainerPendingList.spec.ts.snap
index 54cb4193ef7..b012a7a6f24 100644
--- a/ui/tests/components/Containers/__snapshots__/ContainerPendingList.spec.ts.snap
+++ b/ui/tests/components/Containers/__snapshots__/ContainerPendingList.spec.ts.snap
@@ -66,7 +66,7 @@ exports[`Container Pending List > Renders the component 1`] = `
           <div class="v-input v-input--horizontal v-input--hide-spin-buttons v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-input--plain-underlined v-combobox v-combobox--single mb-4 mr-1 w-100" data-test="ipp-combo">
             <!---->
             <div class="v-input__control">
-              <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-9" aria-owns="menu-v-9">
+              <div class="v-field v-field--active v-field--appended v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-9" aria-owns="menu-v-9">
                 <div class="v-field__overlay"></div>
                 <div class="v-field__loader">
                   <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
@@ -90,7 +90,7 @@ exports[`Container Pending List > Renders the component 1`] = `
                   <div class="v-field__input" data-no-activator="">
                     <!---->
                     <!---->
-                    <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-11" aria-expanded="false" aria-controls="menu-v-9" outlined="" value="10">
+                    <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-11" aria-expanded="false" aria-controls="menu-v-9" value="10">
                   </div>
                   <!---->
                 </div>
diff --git a/ui/tests/components/Containers/__snapshots__/ContainerRejectList.spec.ts.snap b/ui/tests/components/Containers/__snapshots__/ContainerRejectList.spec.ts.snap
index 3ba7a125f4c..1b7997ddd6d 100644
--- a/ui/tests/components/Containers/__snapshots__/ContainerRejectList.spec.ts.snap
+++ b/ui/tests/components/Containers/__snapshots__/ContainerRejectList.spec.ts.snap
@@ -66,7 +66,7 @@ exports[`Container Rejected List > Renders the component 1`] = `
           <div class="v-input v-input--horizontal v-input--hide-spin-buttons v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-input--plain-underlined v-combobox v-combobox--single mb-4 mr-1 w-100" data-test="ipp-combo">
             <!---->
             <div class="v-input__control">
-              <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-9" aria-owns="menu-v-9">
+              <div class="v-field v-field--active v-field--appended v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-9" aria-owns="menu-v-9">
                 <div class="v-field__overlay"></div>
                 <div class="v-field__loader">
                   <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
@@ -90,7 +90,7 @@ exports[`Container Rejected List > Renders the component 1`] = `
                   <div class="v-field__input" data-no-activator="">
                     <!---->
                     <!---->
-                    <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-11" aria-expanded="false" aria-controls="menu-v-9" outlined="" value="10">
+                    <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-11" aria-expanded="false" aria-controls="menu-v-9" value="10">
                   </div>
                   <!---->
                 </div>
diff --git a/ui/tests/components/Devices/__snapshots__/DeviceList.spec.ts.snap b/ui/tests/components/Devices/__snapshots__/DeviceList.spec.ts.snap
index 7e0648e075c..19fec21dc57 100644
--- a/ui/tests/components/Devices/__snapshots__/DeviceList.spec.ts.snap
+++ b/ui/tests/components/Devices/__snapshots__/DeviceList.spec.ts.snap
@@ -164,7 +164,7 @@ exports[`Device List > Renders the component 1`] = `
           <div class="v-input v-input--horizontal v-input--hide-spin-buttons v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-input--plain-underlined v-combobox v-combobox--single mb-4 mr-1 w-100" data-test="ipp-combo">
             <!---->
             <div class="v-input__control">
-              <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-30" aria-owns="menu-v-30">
+              <div class="v-field v-field--active v-field--appended v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-30" aria-owns="menu-v-30">
                 <div class="v-field__overlay"></div>
                 <div class="v-field__loader">
                   <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
@@ -188,7 +188,7 @@ exports[`Device List > Renders the component 1`] = `
                   <div class="v-field__input" data-no-activator="">
                     <!---->
                     <!---->
-                    <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-32" aria-expanded="false" aria-controls="menu-v-30" outlined="" value="10">
+                    <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-32" aria-expanded="false" aria-controls="menu-v-30" value="10">
                   </div>
                   <!---->
                 </div>
diff --git a/ui/tests/components/Devices/__snapshots__/DevicePendingList.spec.ts.snap b/ui/tests/components/Devices/__snapshots__/DevicePendingList.spec.ts.snap
index e0e4033c7b1..b42dff1a902 100644
--- a/ui/tests/components/Devices/__snapshots__/DevicePendingList.spec.ts.snap
+++ b/ui/tests/components/Devices/__snapshots__/DevicePendingList.spec.ts.snap
@@ -66,7 +66,7 @@ exports[`Device Pending List > Renders the component 1`] = `
           <div class="v-input v-input--horizontal v-input--hide-spin-buttons v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-input--plain-underlined v-combobox v-combobox--single mb-4 mr-1 w-100" data-test="ipp-combo">
             <!---->
             <div class="v-input__control">
-              <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-9" aria-owns="menu-v-9">
+              <div class="v-field v-field--active v-field--appended v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-9" aria-owns="menu-v-9">
                 <div class="v-field__overlay"></div>
                 <div class="v-field__loader">
                   <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
@@ -90,7 +90,7 @@ exports[`Device Pending List > Renders the component 1`] = `
                   <div class="v-field__input" data-no-activator="">
                     <!---->
                     <!---->
-                    <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-11" aria-expanded="false" aria-controls="menu-v-9" outlined="" value="10">
+                    <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-11" aria-expanded="false" aria-controls="menu-v-9" value="10">
                   </div>
                   <!---->
                 </div>
diff --git a/ui/tests/components/Devices/__snapshots__/DeviceRejectedList.spec.ts.snap b/ui/tests/components/Devices/__snapshots__/DeviceRejectedList.spec.ts.snap
index b4788550f3d..85cfdd9cf9b 100644
--- a/ui/tests/components/Devices/__snapshots__/DeviceRejectedList.spec.ts.snap
+++ b/ui/tests/components/Devices/__snapshots__/DeviceRejectedList.spec.ts.snap
@@ -66,7 +66,7 @@ exports[`Device Rejected List > Renders the component 1`] = `
           <div class="v-input v-input--horizontal v-input--hide-spin-buttons v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-input--plain-underlined v-combobox v-combobox--single mb-4 mr-1 w-100" data-test="ipp-combo">
             <!---->
             <div class="v-input__control">
-              <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-9" aria-owns="menu-v-9">
+              <div class="v-field v-field--active v-field--appended v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-9" aria-owns="menu-v-9">
                 <div class="v-field__overlay"></div>
                 <div class="v-field__loader">
                   <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
@@ -90,7 +90,7 @@ exports[`Device Rejected List > Renders the component 1`] = `
                   <div class="v-field__input" data-no-activator="">
                     <!---->
                     <!---->
-                    <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-11" aria-expanded="false" aria-controls="menu-v-9" outlined="" value="10">
+                    <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-11" aria-expanded="false" aria-controls="menu-v-9" value="10">
                   </div>
                   <!---->
                 </div>
diff --git a/ui/tests/components/PublicKeys/__snapshots__/PublicKeyList.spec.ts.snap b/ui/tests/components/PublicKeys/__snapshots__/PublicKeyList.spec.ts.snap
index b5aed20daa0..c7b88ea4840 100644
--- a/ui/tests/components/PublicKeys/__snapshots__/PublicKeyList.spec.ts.snap
+++ b/ui/tests/components/PublicKeys/__snapshots__/PublicKeyList.spec.ts.snap
@@ -47,7 +47,7 @@ exports[`Public Key List > Renders the component 1`] = `
         <div class="v-input v-input--horizontal v-input--hide-spin-buttons v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-input--plain-underlined v-combobox v-combobox--single mb-4 mr-1 w-100" data-test="ipp-combo">
           <!---->
           <div class="v-input__control">
-            <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-4" aria-owns="menu-v-4">
+            <div class="v-field v-field--active v-field--appended v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-4" aria-owns="menu-v-4">
               <div class="v-field__overlay"></div>
               <div class="v-field__loader">
                 <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
@@ -71,7 +71,7 @@ exports[`Public Key List > Renders the component 1`] = `
                 <div class="v-field__input" data-no-activator="">
                   <!---->
                   <!---->
-                  <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-6" aria-expanded="false" aria-controls="menu-v-4" outlined="" value="10">
+                  <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-6" aria-expanded="false" aria-controls="menu-v-4" value="10">
                 </div>
                 <!---->
               </div>
diff --git a/ui/tests/components/Tables/DataTable.spec.ts b/ui/tests/components/Tables/DataTable.spec.ts
index 2403c5b980e..1367ad625c2 100644
--- a/ui/tests/components/Tables/DataTable.spec.ts
+++ b/ui/tests/components/Tables/DataTable.spec.ts
@@ -127,7 +127,7 @@ describe("DataTable", () => {
       expect(getPagerRoot().exists()).toBe(false);
     });
 
-    it("resets to first page when itemsPerPage changes via combobox", async () => {
+    it("resets to first page when itemsPerPage changes via combobox selection", async () => {
       await wrapper.setProps({ page: 3 });
       await uiTick();
 
@@ -137,9 +137,6 @@ describe("DataTable", () => {
       combo.vm.$emit("update:modelValue", 25);
       await uiTick();
 
-      await combo.trigger("blur");
-      await uiTick();
-
       const pageEvents = wrapper.emitted("update:page");
       expect(pageEvents).toBeTruthy();
       expect(pageEvents?.some((e) => e[0] === 1)).toBe(true);
diff --git a/ui/tests/components/Tags/__snapshots__/TagList.spec.ts.snap b/ui/tests/components/Tags/__snapshots__/TagList.spec.ts.snap
index 7f51c10b7fd..86ef6f5d22c 100644
--- a/ui/tests/components/Tags/__snapshots__/TagList.spec.ts.snap
+++ b/ui/tests/components/Tags/__snapshots__/TagList.spec.ts.snap
@@ -50,7 +50,7 @@ exports[`Tag List > Renders the component 1`] = `
       <div class="v-input v-input--horizontal v-input--hide-spin-buttons v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-input--plain-underlined v-combobox v-combobox--single mb-4 mr-1 w-100" data-test="ipp-combo">
         <!---->
         <div class="v-input__control">
-          <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-0" aria-owns="menu-v-0">
+          <div class="v-field v-field--active v-field--appended v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-0" aria-owns="menu-v-0">
             <div class="v-field__overlay"></div>
             <div class="v-field__loader">
               <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
@@ -74,7 +74,7 @@ exports[`Tag List > Renders the component 1`] = `
               <div class="v-field__input" data-no-activator="">
                 <!---->
                 <!---->
-                <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-2" aria-expanded="false" aria-controls="menu-v-0" outlined="" value="10">
+                <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-2" aria-expanded="false" aria-controls="menu-v-0" value="10">
               </div>
               <!---->
             </div>
diff --git a/ui/tests/components/Team/ApiKeys/__snapshots__/ApiKeyList.spec.ts.snap b/ui/tests/components/Team/ApiKeys/__snapshots__/ApiKeyList.spec.ts.snap
index edf4da9d380..661485081e6 100644
--- a/ui/tests/components/Team/ApiKeys/__snapshots__/ApiKeyList.spec.ts.snap
+++ b/ui/tests/components/Team/ApiKeys/__snapshots__/ApiKeyList.spec.ts.snap
@@ -54,7 +54,7 @@ exports[`Api Key List > Renders the component 1`] = `
         <div class="v-input v-input--horizontal v-input--hide-spin-buttons v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-input--plain-underlined v-combobox v-combobox--single mb-4 mr-1 w-100" data-test="ipp-combo">
           <!---->
           <div class="v-input__control">
-            <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-10" aria-owns="menu-v-10">
+            <div class="v-field v-field--active v-field--appended v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-10" aria-owns="menu-v-10">
               <div class="v-field__overlay"></div>
               <div class="v-field__loader">
                 <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
@@ -78,7 +78,7 @@ exports[`Api Key List > Renders the component 1`] = `
                 <div class="v-field__input" data-no-activator="">
                   <!---->
                   <!---->
-                  <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-12" aria-expanded="false" aria-controls="menu-v-10" outlined="" value="10">
+                  <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-12" aria-expanded="false" aria-controls="menu-v-10" value="10">
                 </div>
                 <!---->
               </div>
diff --git a/ui/tests/components/firewall/__snapshots__/FirewallRuleList.spec.ts.snap b/ui/tests/components/firewall/__snapshots__/FirewallRuleList.spec.ts.snap
index 98f7d3da08c..ceb53955d0c 100644
--- a/ui/tests/components/firewall/__snapshots__/FirewallRuleList.spec.ts.snap
+++ b/ui/tests/components/firewall/__snapshots__/FirewallRuleList.spec.ts.snap
@@ -66,7 +66,7 @@ exports[`Firewall Rule List > Renders the component 1`] = `
       <div class="v-input v-input--horizontal v-input--hide-spin-buttons v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-input--plain-underlined v-combobox v-combobox--single mb-4 mr-1 w-100" data-test="ipp-combo">
         <!---->
         <div class="v-input__control">
-          <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-8" aria-owns="menu-v-8">
+          <div class="v-field v-field--active v-field--appended v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-8" aria-owns="menu-v-8">
             <div class="v-field__overlay"></div>
             <div class="v-field__loader">
               <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
@@ -90,7 +90,7 @@ exports[`Firewall Rule List > Renders the component 1`] = `
               <div class="v-field__input" data-no-activator="">
                 <!---->
                 <!---->
-                <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-10" aria-expanded="false" aria-controls="menu-v-8" outlined="" value="10">
+                <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-10" aria-expanded="false" aria-controls="menu-v-8" value="10">
               </div>
               <!---->
             </div>
diff --git a/ui/tests/views/__snapshots__/FirewallRules.spec.ts.snap b/ui/tests/views/__snapshots__/FirewallRules.spec.ts.snap
index 271f493eab6..201321e2cc5 100644
--- a/ui/tests/views/__snapshots__/FirewallRules.spec.ts.snap
+++ b/ui/tests/views/__snapshots__/FirewallRules.spec.ts.snap
@@ -68,7 +68,7 @@ exports[`Firewall Rules > Renders the component 1`] = `
         <div class="v-input v-input--horizontal v-input--hide-spin-buttons v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-input--plain-underlined v-combobox v-combobox--single mb-4 mr-1 w-100" data-test="ipp-combo">
           <!---->
           <div class="v-input__control">
-            <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-6" aria-owns="menu-v-6">
+            <div class="v-field v-field--active v-field--appended v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-6" aria-owns="menu-v-6">
               <div class="v-field__overlay"></div>
               <div class="v-field__loader">
                 <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
@@ -92,7 +92,7 @@ exports[`Firewall Rules > Renders the component 1`] = `
                 <div class="v-field__input" data-no-activator="">
                   <!---->
                   <!---->
-                  <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-8" aria-expanded="false" aria-controls="menu-v-6" outlined="" value="10">
+                  <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-8" aria-expanded="false" aria-controls="menu-v-6" value="10">
                 </div>
                 <!---->
               </div>
diff --git a/ui/tests/views/__snapshots__/PublicKeys.spec.ts.snap b/ui/tests/views/__snapshots__/PublicKeys.spec.ts.snap
index 7a99a7092e3..4c1c0d3676a 100644
--- a/ui/tests/views/__snapshots__/PublicKeys.spec.ts.snap
+++ b/ui/tests/views/__snapshots__/PublicKeys.spec.ts.snap
@@ -64,7 +64,7 @@ exports[`Public Keys > Renders the component 1`] = `
           <div class="v-input v-input--horizontal v-input--hide-spin-buttons v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-input--plain-underlined v-combobox v-combobox--single mb-4 mr-1 w-100" data-test="ipp-combo">
             <!---->
             <div class="v-input__control">
-              <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-6" aria-owns="menu-v-6">
+              <div class="v-field v-field--active v-field--appended v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-6" aria-owns="menu-v-6">
                 <div class="v-field__overlay"></div>
                 <div class="v-field__loader">
                   <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
@@ -88,7 +88,7 @@ exports[`Public Keys > Renders the component 1`] = `
                   <div class="v-field__input" data-no-activator="">
                     <!---->
                     <!---->
-                    <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-8" aria-expanded="false" aria-controls="menu-v-6" outlined="" value="10">
+                    <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-8" aria-expanded="false" aria-controls="menu-v-6" value="10">
                   </div>
                   <!---->
                 </div>
diff --git a/ui/tests/views/__snapshots__/Sessions.spec.ts.snap b/ui/tests/views/__snapshots__/Sessions.spec.ts.snap
index a8add43c526..4e738e6c542 100644
--- a/ui/tests/views/__snapshots__/Sessions.spec.ts.snap
+++ b/ui/tests/views/__snapshots__/Sessions.spec.ts.snap
@@ -81,7 +81,7 @@ exports[`Sessions View > Renders the component 1`] = `
           <div class="v-input v-input--horizontal v-input--hide-spin-buttons v-input--density-default v-theme--light v-locale--is-ltr v-input--dirty v-text-field v-input--plain-underlined v-combobox v-combobox--single mb-4 mr-1 w-100" data-test="ipp-combo">
             <!---->
             <div class="v-input__control">
-              <div class="v-field v-field--active v-field--appended v-field--center-affix v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-7" aria-owns="menu-v-7">
+              <div class="v-field v-field--active v-field--appended v-field--dirty v-field--no-label v-field--variant-underlined v-theme--light v-locale--is-ltr" role="combobox" aria-haspopup="menu" aria-expanded="false" aria-controls="menu-v-7" aria-owns="menu-v-7">
                 <div class="v-field__overlay"></div>
                 <div class="v-field__loader">
                   <div class="v-progress-linear v-theme--light v-locale--is-ltr" style="top: 0px; height: 0px; --v-progress-linear-height: 2px;" role="progressbar" aria-hidden="true" aria-valuemin="0" aria-valuemax="100">
@@ -105,7 +105,7 @@ exports[`Sessions View > Renders the component 1`] = `
                   <div class="v-field__input" data-no-activator="">
                     <!---->
                     <!---->
-                    <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-9" aria-expanded="false" aria-controls="menu-v-7" outlined="" value="10">
+                    <div class="v-combobox__selection"><span class="v-combobox__selection-text">10<!----></span></div><input size="1" role="combobox" type="number" id="input-v-9" aria-expanded="false" aria-controls="menu-v-7" value="10">
                   </div>
                   <!---->
                 </div>