using //https://material-ui-pickers.dev/demo/datepicker
Configured like below. this.state.start_year_date starts at null. Works great when user brings up the modal and selects a date and clicks OK. However, if they bring up modal, and hit cancel, it displays 2019 (!??!?!) after the modal closes. However since they didn't actually choose 2019, state.start_year_date is not set to 2019, it is still null. Things go sideways from there. How can I prevent cancel from doing that?
<DatePicker
value={this.state.start_year_date}
onChange={this.handleStartDateChange}
views={["year"]}
disablePast={true}
label={"Start year"}
onAccept={this.handleStartDateAccept}
maxDate={ this.state.end_year_date ? this.state.end_year_date : (new Date().setYear(2099) ) }
/>
I believe you can use the onClose method to either reset the value to the original value or set it to whatever you like.
<DatePicker
value={this.state.start_year_date}
onChange={this.handleStartDateChange}
views={["year"]}
disablePast={true}
label={"Start year"}
onAccept={this.handleStartDateAccept}
maxDate={ this.state.end_year_date ? this.state.end_year_date : (new Date().setYear(2099) ) }
onClose={ () => this.setState({start_year_date: 2019 }) }
/>
Related
The attached graphic shows my issue. If I click outside of the content, but inside the textarea, which you can see a light grey border around, the onBlur event is fired.
I've tried to capture the event and prevent this behaviour using target, but the event looks the same if you click way outside the box - where I want onBlur to fire.
So far using a ref has not worked either. I was hoping that would be the solution. Any ideas on how to allow a user to click anywhere within what they are seeing as the component react-draft-wysiwyg and NOT fire onBlur?
My fix, though feeling a bit hacky because of needing to handle the first onClickAway, was to elevate the onBlur call to a ClickAwayListener wrapping the Editor component like so:
<ClickAwayListener onClickAway={() => {
// Moving onBlur up to support clicking anywhere in component w/o blurring.
// Handle onClickAway firing once on focus of editor textarea.
if (firstClick) {
setFirstClick(false);
} else {
onBlur();
}
}}
>
<Editor
// do not use here: onBlur={onBlur}
// other props
/>
</ClickAwayListener>
Using react-select 3.1.0
I have a filter panel in which 3 select drop-downs cascade to choose the make/model/series for a car.
The general idea is that you can only select a model after make has been selected, and only select a series after model. If you change the make it will reset the following options.
That all works fine... except (as you'll see in the GIF below) the focus on the "series" select box remains despite it being disabled.
Any ideas on how I can remove that focus? Here's what my code looks like (each box is essentially the same):
<Select
id="series-select"
data-selenium-test="series-select"
isDisabled={state.model === null}
isSearchable={false}
options={series}
value={selection}
placeholder="All Series"
isClearable
// eslint-disable-next-line no-console
onChange={/* istanbul ignore next */ (option) => setSeries(option ? option.value : null)}
// handles edge-case where menu is open but MAKE/MODEL is cleared
menuIsOpen={state.model === null ? false : undefined}
/>
Wrapping by setTimeout() with empty time prop in the body of onChange function solved this issue for me. I've made this for first two inputs.
So for you it should looks like this:
onChange={(option) => setTimeout(() => {setSeries(option ? option.value : null)})}
Also you can use blurInputOnSelect prop, but there would be some cases, where issue would be reproduced
onSuccess function does not work properly on react-admin,
my code:
const onSuccess = () => {
redirect('list', props.basePath);
};
<Edit
onFailure={onFailure}
onSuccess={onSuccess}
title="Ediar Usuário"
{...props}
>
<SimpleForm
variant="standard"
toolbar={<CustomToolbar />}
>
</Edit>
On the first time, it works perfectly but at second time, nothing happens.
Do not even trigger the save event
I don't know if this is applicable to your use case but setting undoable to false on Edit component works
I am suffering from the same problem.
Jasper Bernales's tip was effective.
I've changed my code from :
<Edit
onSuccess={onSuccess}
{...props}
>
to :
<Edit
onSuccess={onSuccess}
undoable={false}
{...props}
>
then ...it works!
It seems like a problem caused by forcing "useRedirect" or "useRefresh" to interfere with the delay scheduled by "undoable".The document seems to need an update to this part. just check this out from React-Admin Docs.:
You can disable this behavior by setting undoable={false}. With that
setting, clicking on the Delete button displays a confirmation dialog.
Both the Save and the Delete actions become blocking and delay the refresh of the screen until the data provider responds.
Having the same issue I came across this issue on the react-admin github page. So basically it is not a bug but ... kinda feature the way the Edit component works. In short:
const onSuccess = () => {
...
notify('success', 'info', null, true);
...
}
This is the way you should call notify inside your custom onSuccess function to trigger the real update on the dataProvider.
I don't see anything in API for disabling this behavior.
I just want users to have to click on a specific date.
use the prop onSelecting. For example: onSelecting = {slot => false}
I had to get selection for clicked date, without drag.
Used the onSelectSlot with required logic.
onSelectSlot={(e) => {
if (e.slots?.length > 1) return; // or a message
alert("onSelectSlot" + JSON.stringify(e));
}}
Note: this wont handle drag selection styling!!
I'm trying to create events in react-big-calendar by dragging, putting the data in a Tootip form and send a request to server to save it.
Problem after i drag the event the selection disappears: i need it to stay until I submit the event. Right now
it works like this
In the docs/examples they have alert, which of corse stops exection of function and the selection remains the same:
<BigCalendar
selectable
events={events}
defaultView='week'
scrollToTime={new Date(1970, 1, 1, 6)}
defaultDate={new Date(2015, 3, 12)}
onSelectEvent={event => alert(event.title)}
onSelectSlot={(slotInfo) => alert(
`selected slot: \n\nstart ${slotInfo.start.toLocaleString()} ` +
`\nend: ${slotInfo.end.toLocaleString()}`
)}
/>
if i trow and error at the end of onSelectSlot function it stays also open the selection, but then i need to close after I submit.
Use the onSelecting method for dragging a selection this will give you an object with start and end date of the selection { start: Date, end: Date } and make sure to not return false on this method, for more information see the documentation here