Skip to content

fix: modify the issue of radio and checkbox components being unclickable #37

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
zzcr merged 9 commits into from
Sep 11, 2025
Merged

fix: modify the issue of radio and checkbox components being unclickable #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
a48e07d
fix: optimize the radio component
James-9696 Sep 9, 2025
8fe2bca
fix: revised version
James-9696 Sep 9, 2025
48f45be
fix(radio): remove invalid events
James-9696 Sep 9, 2025
ec13158
fix: modify the test version
James-9696 Sep 9, 2025
99cabde
fix: modify the test version
James-9696 Sep 9, 2025
42deb6f
fix: optimize label tags and add corresponding IDs
James-9696 Sep 9, 2025
2ba5b98
fix: cannot click after component reference, modify checkbox style
James-9696 Sep 9, 2025
31444d3
fix: modify version
James-9696 Sep 9, 2025
b618e57
fix: modify the selection of invalid issues for radio and checkbox
James-9696 Sep 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 15 additions & 1 deletion packages/demos/app/radio/event.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,36 @@
<tiny-radio v-model="value" label="1" @change="changeAction">男</tiny-radio>
<tiny-radio v-model="value" label="2" @change="changeAction">女</tiny-radio>
<p>{{ text }}</p>
<br/> <br/>
<tiny-checkbox-group v-model="checked" class="demo-checkbox-group">
<tiny-checkbox label="复选框1">复选框1</tiny-checkbox>
<tiny-checkbox label="复选框2">复选框2</tiny-checkbox>
</tiny-checkbox-group>
<p>当前选中的值为：{{ checked }}</p>
</div>
</template>

<script setup>
import { ref } from 'vue'
import { TinyRadio } from '@opentiny/vue-mobile'
import { TinyRadio, TinyCheckbox, TinyCheckboxGroup } from '@opentiny/vue-mobile'

const value = ref('1')
const text = ref('男')
const checked = ref(['复选框1'])


function changeAction(value) { // NISVUE3 FIXME: value重复定义，请手工修改
text.value = value === '1' ? '男' : '女'
}
</script>

<style>
.demo-checkbox-group {
display: flex;
justify-content: flex-start;
flex-wrap: nowrap;
width: 200px;
}
.demo {
height: 100%;
overflow-y: auto;
Expand Down
15 changes: 9 additions & 6 deletions packages/mobile/components/radio/src/mobile.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,16 @@
<template>
<label
class="tiny-mobile-radio"
:class="[{ 'is-disabled': state.isDisabled }, { 'is-focus': state.focus }, { 'is-checked': state.model === label }]"
:class="[{ 'is-disabled': state.isDisabled },
{ 'is-focus': state.focus },
{ 'is-checked': state.model === label }]"
role="radio"
:aria-checked="state.model === label"
:aria-disabled="state.isDisabled"
:tabindex="state.tabIndex"
@keydown.space.stop.prevent="state.model = state.isDisabled ? state.model : label"
@keydown.space.stop.prevent="
state.model = state.isDisabled ? state.model : label
"
>
<div class="tiny-mobile-radio__input">
<div class="tiny-mobile-radio__outer">
Expand All @@ -29,7 +33,6 @@
class="tiny-mobile-radio__original"
:value="label"
type="radio"
aria-hidden="true"
v-model="state.model"
@focus="state.focus = true"
@blur="state.focus = false"
Expand All @@ -39,9 +42,9 @@
tabindex="-1"
/>
</div>
<span class="tiny-mobile-radio__label" @keydown.stop>
<slot>{{ text || label }}</slot>
</span>
<span class="tiny-mobile-radio__label">
<slot>{{ text || label }}</slot>
</span>
</label>
</template>

Expand Down
1 change: 1 addition & 0 deletions packages/mobile/components/radio/src/renderless/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,3 +103,4 @@ export const toggleEvent = ({ props, vm, type }: Pick<IRadioRenderlessParams, 'p
})
}
}

2 changes: 1 addition & 1 deletion packages/mobile/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@opentiny/vue-mobile",
"type": "module",
"version": "1.0.0-alpha.11",
"version": "1.0.0-alpha.11.5",
"description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
"author": "OpenTiny Team",
"license": "MIT",
Expand Down
2 changes: 1 addition & 1 deletion packages/theme-mobile/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@opentiny/vue-theme-mobile",
"version": "1.0.0-alpha.11",
"version": "1.0.0-alpha.11.5",
"description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
"homepage": "https://opentiny.design/tiny-vue",
"main": "index.css",
Expand Down
12 changes: 7 additions & 5 deletions packages/theme-mobile/src/checkbox/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@

.@{checkbox-prefix-cls} {
.inject-Checkbox-vars();


width: 100%;
position: relative;
display: inline-block;
white-space: nowrap;
Expand Down Expand Up @@ -85,10 +86,11 @@
opacity: 0;
outline: 0;
position: absolute;
margin: 0;
width: 0;
height: 0;
z-index: -1;
inset: 0;
width: var(--tvm-Checkbox-heatmap-width);
height: var(--tvm-Checkbox-heatmap-height);
opacity: 0;
z-index: 2;
}
Comment on lines +89 to 94

@coderabbitai coderabbitai Bot Sep 10, 2025

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Verification agent

🧩 Analysis chain

Over-constrained absolute positioning and duplicate opacity; simplify the hit-area overlay.

Using inset: 0 together with explicit width/height can over-constrain absolutely positioned elements and may not yield the intended full-row “heatmap.” Also, opacity: 0 is duplicated (Line 86 and Line 92). Recommend relying solely on inset: 0 to cover the entire container and remove the duplicate property.

Apply this diff:

-    inset: 0;
-    width: var(--tvm-Checkbox-heatmap-width);
-    height: var(--tvm-Checkbox-heatmap-height);
-    opacity: 0;
-    z-index: 2;    
+    inset: 0;
+    z-index: 2;

Result: the invisible input fully overlays the component, maximizing clickability across icon + label without layout surprises.

🏁 Script executed:

#!/bin/bash
# Locate the checkbox LESS file
FILE=$(find . -type f -path '*/packages/theme-mobile/src/checkbox/index.less')
# Print lines 1–120 for context
sed -n '1,120p' "$FILE"
# Show all opacity declarations with line numbers
rg -n 'opacity' "$FILE"
# Show inset, width, and height declarations
rg -nE 'inset:|width:|height:' "$FILE"

Length of output: 3261

Simplify hit-area overlay in &__original
Remove redundant width, height and duplicate opacity: 0, and rely on inset: 0 to fully cover the container while preserving z-index: 2.

-    inset: 0;
-    width: var(--tvm-Checkbox-heatmap-width);
-    height: var(--tvm-Checkbox-heatmap-height);
-    opacity: 0;
-    z-index: 2;    
+    inset: 0;
+    z-index: 2;

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents 
In packages/theme-mobile/src/checkbox/index.less around lines 89 to 94, the
&__original hit-area overlay contains redundant declarations (explicit width and
height plus a duplicated opacity: 0) even though inset: 0 already covers the
container; remove the width and height properties and the duplicate opacity
declaration, leaving only inset: 0 and z-index: 2 (and a single opacity: 0 if
needed) so the overlay is simplified and behavior is preserved.


&__label {
Expand Down
4 changes: 4 additions & 0 deletions packages/theme-mobile/src/checkbox/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,4 +35,8 @@
--tvm-Checkbox-checked-disabled-bg-color: var(--tvm-color-bg-disabled-control-checked, #dbdbdb);
// 复选框禁用图标边框色
--tvm-Checkbox-disabled-border-color: var(--tvm-color-bg-disabled-control-unactive, #dbdbdb);
// 复选框热区宽度
--tvm-Checkbox-heatmap-width: var(--tvm-base-size-width-large);
// 复选框热区高度
--tvm-Checkbox-heatmap-height: var(--tvm-base-size-height-mini);
}
9 changes: 4 additions & 5 deletions packages/theme-mobile/src/radio/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,11 +137,10 @@
opacity: 0;
outline: 0;
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
inset: 0;
width: var(--tvm-Radio-heatmap-width);
height: var(--tvm-Radio-heatmap-height);
margin: 0;
}

Expand Down
4 changes: 4 additions & 0 deletions packages/theme-mobile/src/radio/vars.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,4 +21,8 @@
--tvm-Radio-label-text-color: var(--tvm-color-text, #191919);
// 文字左边距
--tvm-Radio-label-padding-left: var(--tvm-space-lg, 12px);
// 热区宽度
--tvm-Radio-heatmap-width: var(--tvm-base-size-width-large);
// 热区高度
--tvm-Radio-heatmap-height: var(--tvm-base-size-height-mini);
}