From 7266b2f27062d113893e503a61068f5cddb499af Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 31 Oct 2024 19:43:17 +0300
Subject: [PATCH] Fixed #6695 - Improve support for Buttons in InputGroupAddon

---
 apps/showcase/doc/inputgroup/ButtonDoc.vue    | 84 ++++++++++++++++---
 .../src/inputgroup/style/InputGroupStyle.js   |  9 ++
 2 files changed, 81 insertions(+), 12 deletions(-)

diff --git a/apps/showcase/doc/inputgroup/ButtonDoc.vue b/apps/showcase/doc/inputgroup/ButtonDoc.vue
index 20ef10831..fb6ffcac4 100644
--- a/apps/showcase/doc/inputgroup/ButtonDoc.vue
+++ b/apps/showcase/doc/inputgroup/ButtonDoc.vue
@@ -10,13 +10,20 @@
 
         <InputGroup>
             <InputText placeholder="Keyword" />
-            <Button icon="pi pi-search" severity="warn" />
+            <InputGroupAddon>
+                <Button icon="pi pi-search" severity="secondary" variant="text" @click="toggle" />
+            </InputGroupAddon>
         </InputGroup>
+        <Menu ref="menu" :model="items" popup class="!min-w-fit" />
 
         <InputGroup>
-            <Button icon="pi pi-check" severity="success" />
+            <InputGroupAddon>
+                <Button icon="pi pi-check" severity="secondary" />
+            </InputGroupAddon>
             <InputText placeholder="Vote" />
-            <Button icon="pi pi-times" severity="danger" />
+            <InputGroupAddon>
+                <Button icon="pi pi-times" severity="secondary" />
+            </InputGroupAddon>
         </InputGroup>
     </div>
     <DocSectionCode :code="code" />
@@ -26,6 +33,7 @@
 export default {
     data() {
         return {
+            items: [{ label: 'Web Search' }, { label: 'AI Assistant' }, { label: 'History' }],
             code: {
                 basic: `
 <InputGroup>
@@ -35,13 +43,20 @@ export default {
 
 <InputGroup>
     <InputText placeholder="Keyword" />
-    <Button icon="pi pi-search" severity="warn" />
+    <InputGroupAddon>
+        <Button icon="pi pi-search" severity="secondary" variant="text" @click="toggle" />
+    </InputGroupAddon>
 </InputGroup>
+<Menu ref="menu" :model="items" popup class="!min-w-fit" />
 
 <InputGroup>
-    <Button icon="pi pi-check" severity="success" />
+    <InputGroupAddon>
+        <Button icon="pi pi-check" severity="secondary" />
+    </InputGroupAddon>
     <InputText placeholder="Vote" />
-    <Button icon="pi pi-times" severity="danger" />
+    <InputGroupAddon>
+        <Button icon="pi pi-times" severity="secondary" />
+    </InputGroupAddon>
 </InputGroup>
 `,
                 options: `
@@ -54,16 +69,38 @@ export default {
 
         <InputGroup>
             <InputText placeholder="Keyword" />
-            <Button icon="pi pi-search" severity="warn" />
+            <InputGroupAddon>
+                <Button icon="pi pi-search" severity="secondary" variant="text" @click="toggle" />
+            </InputGroupAddon>
         </InputGroup>
+        <Menu ref="menu" :model="items" popup class="!min-w-fit" />
 
         <InputGroup>
-            <Button icon="pi pi-check" severity="success" />
+            <InputGroupAddon>
+                <Button icon="pi pi-check" severity="secondary" />
+            </InputGroupAddon>
             <InputText placeholder="Vote" />
-            <Button icon="pi pi-times" severity="danger" />
+            <InputGroupAddon>
+                <Button icon="pi pi-times" severity="secondary" />
+            </InputGroupAddon>
         </InputGroup>
     </div>
 </template>
+
+<script>
+export default {
+    data() {
+        return {
+            items: [{ label: 'Web Search' }, { label: 'AI Assistant' }, { label: 'History' }],
+        };
+    },
+    methods: {
+        toggle(event) {
+            this.$refs.menu.toggle(event);
+        }
+    }
+};
+<\/script>
 `,
                 composition: `
 <template>
@@ -75,19 +112,42 @@ export default {
 
         <InputGroup>
             <InputText placeholder="Keyword" />
-            <Button icon="pi pi-search" severity="warn" />
+            <InputGroupAddon>
+                <Button icon="pi pi-search" severity="secondary" variant="text" @click="toggle" />
+            </InputGroupAddon>
         </InputGroup>
+        <Menu ref="menu" :model="items" popup class="!min-w-fit" />
 
         <InputGroup>
-            <Button icon="pi pi-check" severity="success" />
+            <InputGroupAddon>
+                <Button icon="pi pi-check" severity="secondary" />
+            </InputGroupAddon>
             <InputText placeholder="Vote" />
-            <Button icon="pi pi-times" severity="danger" />
+            <InputGroupAddon>
+                <Button icon="pi pi-times" severity="secondary" />
+            </InputGroupAddon>
         </InputGroup>
     </div>
 </template>
+
+<script setup>
+import { ref } from "vue";
+
+const menu = ref();
+const items = ref([{ label: 'Web Search' }, { label: 'AI Assistant' }, { label: 'History' }]);
+
+const toggle = (event) => {
+    menu.value.toggle(event);
+};
+<\/script>
 `
             }
         };
+    },
+    methods: {
+        toggle(event) {
+            this.$refs.menu.toggle(event);
+        }
     }
 };
 </script>
diff --git a/packages/primevue/src/inputgroup/style/InputGroupStyle.js b/packages/primevue/src/inputgroup/style/InputGroupStyle.js
index 0a0b9c80c..fd6a6def6 100644
--- a/packages/primevue/src/inputgroup/style/InputGroupStyle.js
+++ b/packages/primevue/src/inputgroup/style/InputGroupStyle.js
@@ -36,6 +36,15 @@ const theme = ({ dt }) => `
     border-inline-end: 1px solid ${dt('inputgroup.addon.border.color')};
 }
 
+.p-inputgroupaddon:has(.p-button) {
+    padding: 0;
+    overflow: hidden;
+}
+
+.p-inputgroupaddon .p-button {
+    border-radius: 0;
+}
+
 .p-inputgroup > .p-component,
 .p-inputgroup > .p-inputwrapper > .p-component,
 .p-inputgroup > .p-floatlabel > .p-component,