[PR #259] [MERGED] Fix select all checkbox functionality and progress bar issues #388

New issue

Closed

opened 2026-03-07 20:16:46 +03:00 by kerem · 0 comments

kerem commented

2026-03-07 20:16:46 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/davidarroyo1234/InstagramUnfollowers/pull/259
Author: @Kl4rkx
Created: 12/5/2025
Status: ✅ Merged
Merged: 12/7/2025
Merged by: @davidarroyo1234

Base: master ← Head: fixSelectAllBug

📝 Commits (1)

86b85b3 fix: Resolve select all checkbox bug and progress bar display issues

📊 Changes

4 files changed (+27 additions, -25 deletions)

View changed files

📝 public/index.html (+1 -1)
📝 src/components/Toolbar.tsx (+16 -21)
📝 src/main.tsx (+6 -3)
📝 src/styles/main.scss (+4 -0)

📄 Description

Problem

The "Select all" and "Select all on this page" checkboxes were not responding when clicked, preventing users from selecting multiple users efficiently. Additionally, the progress bar would stop at 99% instead of reaching 100%, and had a small visual gap at the end.

Root Cause

Checkboxes were using onClick instead of onChange, which doesn't work reliably with controlled React checkboxes
The disabled condition was checking state.percentage < 100 && !scanningPaused, but when the scan completes at exactly 100%, Math.floor was rounding down to 99%
Progress bar was missing explicit positioning (left: 0; top: 0), causing alignment issues

Solution

Changed event handler: Replaced onClick with onChange on both checkboxes for proper React controlled component behavior
Simplified disabled logic: Removed the scanningPaused dependency from disabled condition, keeping only state.percentage < 100
Fixed percentage calculation: Changed Math.floor to Math.round in both scanning and unfollowing progress calculations to ensure it reaches exactly 100%
Fixed progress bar CSS: Added explicit left: 0 and top: 0 positioning to eliminate the visual gap
Improved checkbox logic: Enhanced "Select all on this page" to properly check if page has users before marking as checked

Testing

Verified checkboxes respond correctly to clicks
Confirmed progress bar reaches 100% on completion
Progress bar displays without visual gaps
Select all functionality works for both all users and current page
Checkboxes correctly enable/disable based on scan progress

Files Changed

src/components/Toolbar.tsx - Checkbox event handlers and disabled logic
src/main.tsx - Progress percentage calculations
src/styles/main.scss - Progress bar positioning
public/index.html - Auto-generated build output

Additional Notes

All changes maintain backward compatibility and follow existing code patterns. Comments have been added to explain the reasoning behind each fix.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/davidarroyo1234/InstagramUnfollowers/pull/259 **Author:** [@Kl4rkx](https://github.com/Kl4rkx) **Created:** 12/5/2025 **Status:** ✅ Merged **Merged:** 12/7/2025 **Merged by:** [@davidarroyo1234](https://github.com/davidarroyo1234) **Base:** `master` ← **Head:** `fixSelectAllBug` --- ### 📝 Commits (1) - [`86b85b3`](https://github.com/davidarroyo1234/InstagramUnfollowers/commit/86b85b33d5567d0734364a1a9024a428b5f27f32) fix: Resolve select all checkbox bug and progress bar display issues ### 📊 Changes **4 files changed** (+27 additions, -25 deletions) <details> <summary>View changed files</summary> 📝 `public/index.html` (+1 -1) 📝 `src/components/Toolbar.tsx` (+16 -21) 📝 `src/main.tsx` (+6 -3) 📝 `src/styles/main.scss` (+4 -0) </details> ### 📄 Description ## Problem The "Select all" and "Select all on this page" checkboxes were not responding when clicked, preventing users from selecting multiple users efficiently. Additionally, the progress bar would stop at 99% instead of reaching 100%, and had a small visual gap at the end. ## Root Cause 1. Checkboxes were using `onClick` instead of `onChange`, which doesn't work reliably with controlled React checkboxes 2. The disabled condition was checking `state.percentage < 100 && !scanningPaused`, but when the scan completes at exactly 100%, `Math.floor` was rounding down to 99% 3. Progress bar was missing explicit positioning (`left: 0; top: 0`), causing alignment issues ## Solution - **Changed event handler**: Replaced `onClick` with `onChange` on both checkboxes for proper React controlled component behavior - **Simplified disabled logic**: Removed the `scanningPaused` dependency from disabled condition, keeping only `state.percentage < 100` - **Fixed percentage calculation**: Changed `Math.floor` to `Math.round` in both scanning and unfollowing progress calculations to ensure it reaches exactly 100% - **Fixed progress bar CSS**: Added explicit `left: 0` and `top: 0` positioning to eliminate the visual gap - **Improved checkbox logic**: Enhanced "Select all on this page" to properly check if page has users before marking as checked ## Testing - Verified checkboxes respond correctly to clicks - Confirmed progress bar reaches 100% on completion - Progress bar displays without visual gaps - Select all functionality works for both all users and current page - Checkboxes correctly enable/disable based on scan progress ## Files Changed - `src/components/Toolbar.tsx` - Checkbox event handlers and disabled logic - `src/main.tsx` - Progress percentage calculations - `src/styles/main.scss` - Progress bar positioning - `public/index.html` - Auto-generated build output ## Additional Notes All changes maintain backward compatibility and follow existing code patterns. Comments have been added to explain the reasoning behind each fix. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>