fix: Resolve ProductCard disappearance during multi-select mode

[Eren-Can-Donertas]

Description

A critical rendering regression has been identified in the ProductList where activating multi-select mode and selecting an item causes the ProductCard component to vanish, leaving behind a black placeholder-like empty area. This behavior suggests a failure in conditional rendering logic or a CSS/styling conflict triggered by the selection state. This issue breaks the user's ability to verify their selection and severely compromises the UX during bulk actions.

---

Ownership, Deadline & Effort

• Team Owner: Engineering
• Individual Owner: @MehmetBegun
• Deadline: 2026-01-26 24:00 (end of day, explicitly stated)
• Estimated Effort: 6 hours

---

Deliverables

• Rendering Fix: Updated ProductCard logic to ensure component persistence during selection.
• Styling Correction: Verified selection overlay that highlights the card without collapsing the layout.
• Regression Test: A new test case ensuring the component remains in the DOM when the isSelected state is toggled.

---

Scope

In Scope:

• Investigating the ProductCard component's conditional rendering logic.
• Debugging the "Selected" state styles to identify the source of the black placeholder/empty area.
• Ensuring the selection checkbox or overlay renders correctly on top of the card.
• Cross-platform verification (Web, Android, iOS).

Out of Scope:

• Modifying the multi-select logic itself (e.g., selection limit).
• Adding new features to the Product List.
• Backend changes.

---

Acceptance Criteria

• ProductCard remains fully rendered and visible when selected in multi-select mode.
• Selection state is indicated by a visual highlight or overlay, not a layout collapse.
• No black or empty areas appear in place of product data.
• Layout remains stable (no jumping or shifting) when entering or exiting multi-select mode.
• Consistent behavior is verified across Android, iOS, and Web platforms.

---

Domain-Specific Notes: Engineering

• Component Logic: Check if isSelected is causing the component to unmount or return an empty fragment in the render method.
• CSS/Styling: Inspect if z-index, opacity, or background-color settings on the selection overlay are masking the underlying content.
• Platform: If using React Native, check StyleSheet conditional arrays for potential null or undefined style objects.

---

Validation / Review Requirements

• Validation: Manual verification on all three platforms using the "Select All" and individual selection flows.
• Required Reviewers: Frontend Lead or Senior Mobile Engineer.
• Definition of Done: Fix merged into main branch, RCA comment posted, and no disappearing cards observed in the final build.

---

Additional Context

• Current Behavior: Selecting a product in multi-select mode renders a black rectangle instead of the product image and details.

[MehmetBegun]

Root Cause Analysis (RCA)

• Problem: Product cards disappear and are replaced by black placeholders when selected in multi-select mode.
• Root Cause: A conditional rendering check in the ProductCard component is likely incorrectly returning null or a default empty container when the isSelected prop is true. Alternatively, a styling collision in the "Selected" state CSS/StyleSheet is setting visibility: hidden or display: none instead of applying an overlay.
• Detection: Manual testing of the multi-select feature on the staging environment.
• Impact: High. Bulk actions (delete, add to cart, compare) are unusable as users cannot see what they have selected.
• Prevention: Implementation of visual regression tests for component states (Default vs. Selected).