reagent-project/reagent-forms

Select input doesn't repaint selected value when state is changed externally

Open

#19 opened on Nov 7, 2014

View on GitHub
 (21 comments) (0 reactions) (0 assignees)HTML (337 stars) (78 forks)batch import
help wanted

Description

The :select list control doesn't display the correct value when initiated with state.

For example, if I pass `(atom {:status "P"}) into this form:

   (row "Status" [:select.form-control {:field :list :id :status}
                  [:option {:key "A"} "Active"]
                  [:option {:key "P"} "Paused"]
                  [:option {:key "X"} "Archived"]])

NOTE: I've tried both strings and keywords for the value of the :key attribute.

The form will render with the first option displayed ("Active"). The atom will continue to hold the value of "P" until the user selects a new value from the select.

The issue is also illustrated on the examples page where the select should display bar but instead displays foo.

I tested this in both the latest releases of Chrome and Firefox on OSX.

Contributor guide

Tech stack
reacthtmlcss
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
basic ClojureScriptReagent
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
50
Research direction
The select component fails to update its displayed value when the underlying atom is changed externally. Investigate the reagent forms source code, specifically the select component implementation, to understand how it initializes and updates its value. Look at the examples page mentioned in the issue to reproduce the problem. Consider how Reagent's form handling and lifecycle methods affect value binding. Review the discussion in the comments for any proposed fixes or insights.