From ed2f0fa01ef8216158042a4f3dd85c6b1596998b Mon Sep 17 00:00:00 2001
From: Rafal <rafal.osieka@gmail.com>
Date: Wed, 29 May 2024 16:25:36 +0200
Subject: [PATCH] fix(VCheckboxBtn): reset checked state when readonly is true
 (#19861)

fixes #19137
---
 .../VCheckbox/__tests__/VCheckboxBtn.spec.cy.tsx    | 13 +++++++++++++
 .../VSelectionControl/VSelectionControl.tsx         | 11 ++++++++++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/packages/vuetify/src/components/VCheckbox/__tests__/VCheckboxBtn.spec.cy.tsx b/packages/vuetify/src/components/VCheckbox/__tests__/VCheckboxBtn.spec.cy.tsx
index 51503877ecf..851f99fcfa9 100644
--- a/packages/vuetify/src/components/VCheckbox/__tests__/VCheckboxBtn.spec.cy.tsx
+++ b/packages/vuetify/src/components/VCheckbox/__tests__/VCheckboxBtn.spec.cy.tsx
@@ -47,4 +47,17 @@ describe('VCheckboxBtn', () => {
 
     cy.get('input').should('have.attr', 'aria-checked', 'mixed')
   })
+
+  it('should not update input checked state when it is readonly', () => {
+    const model = ref(false)
+    cy.mount(() => (
+      <VCheckboxBtn v-model={ model.value } readonly />
+    ))
+
+    cy.get('.v-checkbox-btn').click(20, 20)
+
+    cy.get('input').should('not.be.checked').then(() => {
+      expect(model.value).to.be.false
+    })
+  })
 })
diff --git a/packages/vuetify/src/components/VSelectionControl/VSelectionControl.tsx b/packages/vuetify/src/components/VSelectionControl/VSelectionControl.tsx
index 7340ba32954..97d024d77ae 100644
--- a/packages/vuetify/src/components/VSelectionControl/VSelectionControl.tsx
+++ b/packages/vuetify/src/components/VSelectionControl/VSelectionControl.tsx
@@ -204,7 +204,16 @@ export const VSelectionControl = genericComponent<new <T>(
     }
 
     function onInput (e: Event) {
-      if (!isInteractive.value) return
+      if (!isInteractive.value) {
+        if (input.value) {
+          // model value is not updated when input is not interactive
+          // but the internal checked state of the input is still updated,
+          // so here it's value is restored
+          input.value.checked = model.value
+        }
+
+        return
+      }
 
       if (props.readonly && group) {
         nextTick(() => group.forceUpdate())