Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

[BUG] dcc.DatePickerRange doesn't update on blur

Ouverte
  • Quelque chose ne va pas ?
#3,678 0 commentaires 0 réactions 1 personne assignée Voir sur GitHub

Les mainteneurs répondent en général sous 2 jours

@KoolADE85 y travaille déjà.

Depuis le 20/3/2026.

Évaluation

Cette issue n'a pas encore été évaluée.

Description

Description of the issue

When a user types a date directly into dcc.DatePickerRange’s start/end text inputs, Dash doesn’t update start_date / end_date (and callbacks don’t fire) unless the user presses Enter (or arrow up, arrow down or tab). If the user types a valid date and then clicks elsewhere (input loses focus), the typed value is not committed.

Steps to reproduce

  1. Run sample code (available at the end of the issue).
  2. Click into the start (or end) input and type a valid date.
  3. Click outside the component (blur) without pressing Enter.

Current behavior
No update occurs until Enter (or Tab) is pressed.

https://github.com/user-attachments/assets/2a1602d4-61ad-45af-ac9a-af7122676edc

Expected behavior
The typed date is parsed/committed on blur and start_date / end_date update, triggering callbacks:

https://github.com/user-attachments/assets/28724130-74b1-4818-9662-baa62a63538b

Suggested fix
https://github.com/plotly/dash/blob/v4.0.0/components/dash-core-components/src/fragments/DatePickerRange.tsx#L345-L351

Add onBlur handlers to both AutosizeInput fields to call the existing commit functions:

  • onBlur={() => sendStartInputAsDate()}
  • onBlur={() => sendEndInputAsDate()}

This would commit typed values on unfocus, which then flows to setProps via the existing useEffect that emits updates when internalStartDate / internalEndDate change.

Code to reproduce and workaround

Code to reproduce

from datetime import date
from dash import Dash, dcc, html, Input, Output, State, callback, clientside_callback
import dash

app = Dash()

app.layout = html.Div([
    html.Div(f"dash version: {dash.__version__}"),
    html.Div(id='output-container-date-picker-range'),
    dcc.DatePickerRange(
        id='my-date-picker-range',
        initial_visible_month=date(2017, 8, 5),
    ),
])

@callback(
    Output('output-container-date-picker-range', 'children'),
    Input('my-date-picker-range', 'start_date'),
    Input('my-date-picker-range', 'end_date'))
def update_output(start_date, end_date):
    string_prefix = 'You have selected: '
    if start_date is not None:
        start_date_object = date.fromisoformat(start_date)
        start_date_string = start_date_object.strftime('%B %d, %Y')
        string_prefix = string_prefix + 'Start Date: ' + start_date_string + ' | '
    if end_date is not None:
        end_date_object = date.fromisoformat(end_date)
        end_date_string = end_date_object.strftime('%B %d, %Y')
        string_prefix = string_prefix + 'End Date: ' + end_date_string
    if len(string_prefix) == len('You have selected: '):
        return 'Select a date to see it displayed here'
    else:
        return string_prefix

if __name__ == '__main__':
    app.run(debug=True, use_reloader=False, dev_tools_hot_reload=False)

Workaround
Add this clientside callback:

from dash import clientside_callback

clientside_callback(
    """
    function(component_id) {
        // Use a small timeout to allow React to finish rendering the DOM nodes
        setTimeout(() => {
            const start_date = document.getElementById(`${component_id}`);
            const end_date = document.getElementById(`${component_id}-end-date`);

            if (start_date) {
                start_date.onblur = () => {
                    start_date.dispatchEvent(new KeyboardEvent('keydown', { 
                        key: 'Tab',
                        bubbles: true 
                    }));
                };
            }

            if (end_date) {
                end_date.onblur = () => {
                    end_date.dispatchEvent(new KeyboardEvent('keydown', { 
                        key: 'Tab',
                        bubbles: true 
                    }));
                };
            }
        }, 500); // 500ms is usually enough for the DOM to settle
        
        return component_id;
    }
    """,
    Output('my-date-picker-range', 'id'),
    Input('my-date-picker-range', 'id')
)
  • This code adds an event listener for both the start and end date text boxes. This event listener simulates a "Tab" key press when the focus is taken from those text boxes (i.e. when the blur event happens).
  • The code regarding the timeout is to make sure that the clientside callback runs once the DatePickerRange textboxes are renderer on the page. Otherwise, we'll get errors like: can't access property "onblur", start_date is null.
  • Since the input is the DatePickerRange id, this clientside_callback will only run once.
Langage dominant
Python
Étoiles
24.4k
Forks
2.3k
Merge moyen
2 j 14 h
PR mergées (30 j)
23

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de plotly/dash

Toutes les issues de plotly/dash

Issues similaires

Plus d'issues Python

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.