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!!
Related
I'm creating a React form with Material UI. My goal is to force the user to answer all the questions before they can click the download button. In other words I'm trying to leave the download button in the disabled state until I can determine that values are set on each field. I've tried to get this working with and without react-hook-form.
What I've tried
Without react-hook-form...
I have my example in coding sandbox here:
https://codesandbox.io/s/enable-download-button-xwois4?file=/src/App.js
In this attempt I abandoned react-hook-form and added some logic that executes onChange. It looks through each of the formValues and ensures none of them are empty or set to "no answer". Like this:
const handleInputChange = (e) => {
// do setFormValues stuff first
// check that every question has been answered and enable / disable the download button
let disableDownload = false;
Object.values(formValues).forEach((val) => {
if (
typeof val === "undefined" ||
val === null ||
val === "no answer" ||
val === ""
) {
disableDownload = true;
}
});
setBtnDisabled(disableDownload);
The problem with this approach, as you'll see from playing with the UI in codesandbox, is that it requires an extra toggle of the form field value in order to detect that every field has been set. After the extra "toggle" the button does indeed re-enable. Maybe I could change this to onBlur but overall I feel like this approach isn't the right way to do it.
Using react-hook-form
With this approach...the approach I prefer to get working but really struggled with, I ran into several problems.
First the setup:
I removed the logic for setBtnDisabled() in the handleInputChange function.
I tried following the example on the react-hook-form website for material ui but in that example they're explicitly defining the defaultValues in useForm where-as mine come from useEffect. I want my initial values to come from my questionsObject so I don't think I want to get rid of useEffect.
I couldn't figure out what to do with {...field} as in the linked material ui example. I tried dropping it on RadioGroup
<Controller
name="RadioGroup"
control={control}
rules={{ required: true }}
render={({ field }) => (
<RadioGroup
questiontype={question.type}
name={questionId}
value={formValues[questionId]}
onChange={handleInputChange}
row
{...field}
>
but I get an MUI error of : MUI: A component is changing the uncontrolled value state of RadioGroup to be controlled.
Also, I don't see that useForm's state is changing at all. For example, I was hoping the list of touchedfields would increase as I clicked radio buttons but it isn't. I read that I should pass formState into useEffect() like this:
useEffect(() => {
const outputObj = {};
Object.keys(questionsObject).map(
(question) => (outputObj[question] = questionsObject[question].value)
);
setFormValues(outputObj);
}, [formState]);
but that makes me question what I need to do with formValues. Wondering if formState is supposed to replace useState for this.
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
This is a Framer/React question:
I have a bunch of text fields in a "page" component and I want the focus to shift on every "page" change.
There's a button controlling the pager but no trigger (onPageChange / onClick) is changing the attribute of "focus" on the relevant text input.
This is the code I tried using to change the value of foc2 (the focus attribute) to true
When I manually change it to true it works, but in this case it doesn't
export function Page(): Override {
return {
currentPage: state.page,
onChangePage: (index) => {
state.page = index
state.foc2 = true
},
}
}
Do you have more complete code you could share?
Make sure you set the state to the index of the current focused input, and use that to change the currentPage property.
Happy to help if you send more context, you can also find more help in Framer's community at https://framer.com/r/discord
Could you please tell me How to focus input date field in react?I am using a plugin of semantic
https://www.npmjs.com/package/semantic-ui-calendar-react
I want to focus date input field on button click here is my code.
here is my code
https://codesandbox.io/s/3l414mno5
focus = () => {
console.log(this.a);
this.a[0].onFocus();
// this.inputRef.focus()
};
the focus is not coming in input field why?
any update ?
To enable a focus on button click, you need to set a ref like this :
this.logButton = React.createRef();
ref={this.logButton}
and access it in button click like below:
focus = e => {
this.logButton.current.openPopup();
};
openPopup() - is a fucntion to open the calendar popup, the plugin your using, has code like this, check here
demo and In multiple data fields, use dynamic refs. Hope it helps.
I am using AgGrid and have rowSelection="multiple" on my grid, have {cellRendererFramework: PrintCell} on the last column, which is a small component that displays a link.
I want it so, when I click on the link inside PrintCell, a certain action should be executed, without altering the the state of the grid itself, and keep the current selected lines selected without making the row containing the link selected. I tried doing event.stopPropagation and event.preventDefault to prevent the parent row from getting selected, to no avail.
Any Idea how to achieve this ? thanks
Updated for June 2018:
The API for Ag-Grid has changed. The key change is that there needs to be a change to e.api.gridOptionsWrapper.gridOptions.suppressRowClickSelection from within the onCellFocused event of the grid
Here is a full solution that uses a reusable cell renderer to create actions or buttons at the end of a row that won't trigger row selection. This solution assumes that you are using the React version of ag-grid and that you are using a custom cell renderer.
// class fields
disableClickSelectionRenderers = ['rowActionRenderer'];
// columns defs
...
{headerName: '', field: 'someButton',
suppressMenu: true, suppressFilter: true, suppressSorting: true,
suppressMovable: true,
suppressNavigable: true, suppressResize: true,
cellRenderer: 'rowActionRenderer',
cellRendererParams: {
icon: <i className="fa fa-pencil"/>,
onClick: (e, props) => {
// do the action
},
},
},
render() {
<AgGridReact
columnDefs={...}
// ... other properties
onCellFocused={e => {
if (e.column && this.disableClickSelectionRenderers.includes(e.column.colDef.cellRenderer)) {
e.api.gridOptionsWrapper.gridOptions.suppressRowClickSelection = true;
}
else {
e.api.gridOptionsWrapper.gridOptions.suppressRowClickSelection = false;
}
}}
}
Since the row click is a specified behaviour it might be easier to perhaps use the checkbox selection and disable the focus row selection entirely. But if you want to keep with this path I generated the required behaviour by intercepting the event in the cell Focus and blocking row selection there.
private onCellFocused($event) {
if($event.column && $event.column.colId == "commentid"){
this.gridOptions.suppressRowClickSelection = true;
} else {
this.gridOptions.suppressRowClickSelection = false;
}
This switches the row selection event of entirely but only if you select the column where you don't want the behaviour to occur (caveats: angular 2 example and we have wrapped the ag-grid inside our own component.
Hope this helps...
For TS + Angular
use it inside your rowclick method
Incase if you want to ignore a particular cell this piece of code can help you
if (!(
this.gridApi?.getFocusedCell()?.column.getColId() ===
'columnName')) {
//your code here
}
the gridApi can probably be got from the onGridReady method