React - checkbox not update when multiple unselect - javascript

When I click the + button to expand the group and click the checkbox of group 1, it executes as expected.
But the problem is,
If I click the checkbox of group 1 first and then expand the group by clicking + button,
It shows all user clicked which is correct, if I clicked the checkbox of group 1 again, the checkbox of group 1 become unchecked, but the checkboxes of users do not get unchecked.
Reproduce step:
refresh the page > Click group 1 checkbox > click + to expand > click group 1 checkbox again > then you'll see user checkbox do not become unselected
SandBox Link below:
https://codesandbox.io/s/dazzling-antonelli-gl9rm
after Unselecting group 1, 2 checkboxes of users do not become unselected:

Your isExist method returns undefined instead of false, fix it to return always either true/false.
isExist = (id, group) => {
if (!this.props.selected) {
console.log("selected = null");
return false;
}
return (
this.props.selected.find((ele) => ele.id === group + id) !== undefined
);
};
This way you don't have to manually convert its return value to boolean using !!.
I suggest to also refactor your handleSelected method to
handleSelected = async (e) => {
const { selected } = this.state;
if (e.target.checked) {
let temp = { id: e.target.id, name: e.target.name };
return this.setState({ selected: [...selected, temp] });
}
this.setState({
selected: selected.filter(({ id }) => id !== e.target.id)
});
};

The issue you are experiencing is a result of a problem in the first render - as you can see - you have "undefined Contact". You need to solve this issue, and then the grouping will work as you desire.

Related

Mandatory checkbox selection in a group of checkboxes

I have a group of checkboxes. By default, few of them are checked. Once the user starts unchecking and when he unchecks last but one, I want to disable the last check box so that I am mandating one selection should always be there. Also, when he checks back the last but one, disabled checkbox should be enabled.
let hiddenCount = 0; let lastField;
this.checkBoxes.find((f) => {
if (!f.showDefault) {
hiddenCount++;
} else {
lastField = f;
}
});
this.checkBoxes.find((p) => {
if (totalCount - hiddenCount === 1 && lastField) {
p.disable = lastField.key === p.key;
} else {
p.disable = false;
}
});

Why does cursor move to start of input field when value is changed dynamically?

I have an input field in my react application like below. suggestedTerm and searchTerm are coming from component's state. searchTerm state is being set in onChange handle. suggestedTerm state is being set when i navigate up or down in autocomplete suggestion list.
<input value={suggestedTerm || searchTerm}
onChange={handleInputChange}
onFocus={() => {
setShowFlyout(true);
clearActiveSuggestion();
}}
onKeyDown={handleInputKeyDown}
ref={searchInput}
/>
Here through onKeyDown handler, i am handling up and down arrow key events to navigate through the autosuggestion suggestions list that is being produced while keeping the focus on the input field. That was done basically to cater accesibility.
The requirement is to set the selected suggestion on the input field as we navigate through the autosuggestion list. However, the issue i am facing here is that my cursor moves to the beginning of the input field whenever i set suggestedTerm state which in return sets the input field's value while navigating up using up arrow key. This does not happen when i navigate through down key.
Attaching here my up key and down key logic
if ((e.key === "ArrowUp" || e.keyCode === 38) && !isEmpty(suggestions)) {
const focusedItem = getActiveSuggestion();
const index = focusedItem[0].index - 1;
if (!isEmpty(focusedItem) && focusedItem[0] && focusedItem[0].index > 0) {
setActiveSuggestion(index);
} else {
//Clear active suggestions if up is pressed while focus is on first element
clearActiveSuggestion();
}
if ((e.key === "ArrowDown" || e.keyCode === 40) && !isEmpty(suggestions)) {
const focusedItem = getActiveSuggestion();
//Set first suggestion active
if (isEmpty(focusedItem)) setActiveSuggestion(0);
else {
if (
!isEmpty(focusedItem) &&
focusedItem[0] &&
focusedItem[0].index < (suggestions && suggestions.length - 1)
) {
setActiveSuggestion(focusedItem[0].index + 1);
} else {
//Set first suggestion active when focus is on last item already and down key is pressed
setActiveSuggestion(0);
}
}
}
const clearActiveSuggestion = () => {
setSuggestions(suggestions.map(suggestion => ({ ...suggestion, active: false })));
setSuggestedTerm("");};
const getActiveSuggestion = () => {
return suggestions.filter(suggestion => suggestion.active);};
const setActiveSuggestion = activeItemIndex => {
const updatedSuggestion = suggestions.map(suggestion => {
if(activeItemIndex === suggestion.index)
setSuggestedTerm(suggestion.dq);
return {...suggestion, active: activeItemIndex === suggestion.index};
});
setSuggestions(updatedSuggestion);};
First, i do not understand why my input field is setting cursor to start of the input field even though i am changing the state and state change should reset value of input field.
Second, i searched a number of ways to manually set the cursor using setSelection method and manually setting input field's value using ref but nothing is changing the behavior.
Can anybody figure out the issue here?
Thanks
Figured out the root cause. Actually, it is a default behavior of an input field to take cursor to start of the string in an input field when up arrow is pressed on it so i simply added
e.preventDefault();
and that prevented the default behavior of the input field to move the cursor. It had nothing to do with how i am setting the state or setting the selectionRange of the input manually.

Set checkbox to checked based on other inputs values

I want to set the checkbox input to checked if specific inputs is filled with values but with the option to change checkbox to unchecked again.
the business need requires that this checkbox should be set to checked automatically if the user filled the required inputs but with the option to set it back to unchecked if he wants.(user experience stuff)usecase demo
Consider the following code:
autoAddFinalEvaluation = () => {
const {channelValue, evaluationValue, txtValue} = this.state;
if(channelValue !== null && evaluationValue !== null && txtValue !== '') {
this.setState({
checked: true
})
}
}
i updated the state dynamically like this
autoAddFinalEvaluation = () => {
const {channelValue, evaluationValue, txtValue} = this.state;
if(channelValue !== null && evaluationValue !== null && txtValue !== '') {
this.setState({
checked: !this.state.checked
})
}
}
now i can set the checkbox normally but still not working as i expect, while filling the 3rd input(text area) the checkbox switches from true to false and vice versa.
I think the problem is "autoAddFinalEvaluation" is executed after you uncheck the checkbox while it should be called only when input changed in what we may call parent field (The field which input causes the checkbox to be checked).

jquery filter return all match remove()

If you click on the selected checkboxes, the problem is encountered while writing code that removes() the input val value that matches the val value in the checkbox, using each while it is being deleted.
Problem
When there are two or more checked checkboxes, only the first one is deleted even if the value of val is the same.
onlyremove.click(function () {
var chk = $("input[name='cbx']:checked").length;
$("input[name='cbx']:checked").each(function() {
pickbtn.find('.ordering').filter(function () {
return $("input[name='cbx']:checked").val() && $(this).find('.number').val() == $("input[name='cbx']:checked").val();
}).text('rldd'),alert('123123'), --num;
});
});

Disable button if the selected row contains a specific value ng-grid

I'm trying to disable a remove button for my grid if the row contains a specific value.
I've already have a condition in my ng-disable for the button (and want to keep that), but I want to add a second one, ex:
mySelection.title == 'important'
How till this behave if I select two rows? It won't iterate through the selected rows and check if the rows contains a title with important, so how can I solve this?
use a function() in ng-disabled
for EX:
<button ng-disabled="isDisabled(mySelection.title, parameter2)"> Remove </button>
in controller,
$scope.isDisabled = function(parameter1, parameter2) {
// do your comparisons and return true or false
// for ex:
// if(parameter1 == 'important' && parameter2 == 'spmeOtherValue') {
// return true;
// } else {
// return false;
// }
}

Categories