[BUG] Web: Selected face in search filters does not show border highlight on light theme

[ResponsiblyUnranked]

The bug

When I am using the web browser advanced search view and I select a face, the face only appears 'selected' (i.e. highlighted blue) when I move my mouse away from the face button.

I would expect the face to highlight blue immediately upon clicking, rather than when I move my mouse away, as it seems as though the face hasn't actually be selected. There is no feedback to the user that the face has been selected until they move their mouse off the button.

The OS that Immich Server is running on

Ubuntu 23.10

Version of Immich Server

1.101.0

Version of Immich Mobile App

1.101.0 build.131

Platform with the issue

• [ ] Server
• [X] Web
• [ ] Mobile

Your docker-compose.yml content

#
# WARNING: Make sure to use the docker-compose.yml of the current release:
#
# https://github.com/immich-app/immich/releases/latest/download/docker-compose.yml
#
# The compose file on main may not be compatible with the latest release.
#

name: immich

services:
  immich-server:
    container_name: immich_server
    image: ghcr.io/immich-app/immich-server:${IMMICH_VERSION:-release}
    command: ['start.sh', 'immich']
    volumes:
      - ${UPLOAD_LOCATION}:/usr/src/app/upload
      - /etc/localtime:/etc/localtime:ro
    env_file:
      - .env
    ports:
      - 2283:3001
    depends_on:
      - redis
      - database
    restart: always

  immich-microservices:
    container_name: immich_microservices
    image: ghcr.io/immich-app/immich-server:${IMMICH_VERSION:-release}
    # extends: # uncomment this section for hardware acceleration - see https://immich.app/docs/features/hardware-transcoding
    #   file: hwaccel.transcoding.yml
    #   service: cpu # set to one of [nvenc, quicksync, rkmpp, vaapi, vaapi-wsl] for accelerated transcoding
    command: ['start.sh', 'microservices']
    volumes:
      - ${UPLOAD_LOCATION}:/usr/src/app/upload
      - /etc/localtime:/etc/localtime:ro
    env_file:
      - .env
    depends_on:
      - redis
      - database
    restart: always

  immich-machine-learning:
    container_name: immich_machine_learning
    # For hardware acceleration, add one of -[armnn, cuda, openvino] to the image tag.
    # Example tag: ${IMMICH_VERSION:-release}-cuda
    image: ghcr.io/immich-app/immich-machine-learning:${IMMICH_VERSION:-release}
    # extends: # uncomment this section for hardware acceleration - see https://immich.app/docs/features/ml-hardware-acceleration
    #   file: hwaccel.ml.yml
    #   service: cpu # set to one of [armnn, cuda, openvino, openvino-wsl] for accelerated inference - use the `-wsl` version for WSL2 where applicable
    volumes:
      - model-cache:/cache
    env_file:
      - .env
    restart: always

  redis:
    container_name: immich_redis
    image: registry.hub.docker.com/library/redis:6.2-alpine@sha256:51d6c56749a4243096327e3fb964a48ed92254357108449cb6e23999c37773c5
    restart: always

  database:
    container_name: immich_postgres
    image: registry.hub.docker.com/tensorchord/pgvecto-rs:pg14-v0.2.0@sha256:90724186f0a3517cf6914295b5ab410db9ce23190a2d9d0b9dd6463e3fa298f0
    environment:
      POSTGRES_PASSWORD: ${DB_PASSWORD}
      POSTGRES_USER: ${DB_USERNAME}
      POSTGRES_DB: ${DB_DATABASE_NAME}
    volumes:
      - pgdata:/var/lib/postgresql/data
    restart: always

volumes:
  pgdata:
  model-cache:

Your .env content

# You can find documentation for all the supported env variables at https://immich.app/docs/install/environment-variables

# The location where your uploaded files are stored
UPLOAD_LOCATION=./library

# The Immich version to use. You can pin this to a specific version like "v1.71.0"
IMMICH_VERSION=release

# Connection secret for postgres. You should change it to a random password
DB_PASSWORD=...

# The values below this line do not need to be changed
###################################################################################
DB_HOSTNAME=immich_postgres
DB_USERNAME=postgres
DB_DATABASE_NAME=immich

REDIS_HOSTNAME=immich_redis

Reproduction steps

1. Go to web view.
2. Click on search bar.
3. Click on the custom/advanced icon on the right for advanced search.
4. Click on a person's face, and do not move the mouse.
5. Observe there is no indication that the 'click' was successful, and that the face has been selected.

Additional information

No response

[bo0tzz]

I can't reproduce this, it works as expected for me. Which browser are you using?

[ResponsiblyUnranked]

@bo0tzz I am using Firefox 124.0.2 (64-bit) on my MacBook Pro (2019) with Sonoma 14.4.1

[bo0tzz]

I've tried reproducing on chrome and the same version of firefox, on both windows and an (older) intel mac, but no luck. Please try in a private window/with all your extensions disabled.

[ResponsiblyUnranked]

I was able to re-create in an incognito window in Chrome (no extensions), a normal Safari window (no extensions) too.

Here is a video: https://streamable.com/gwm830

Notice it only shows the darker 'selected' highlight once I mouse away.

[bo0tzz]

Aha - I've been testing with the dark theme enabled, which does all work as expected ;)

[ResponsiblyUnranked]

Ah well, good we were able to narrow it down further, to light mode only!