I'm able to apply tabindex on native radio buttons and use tab change the value with arrow up and arrow down on keyboard. But can I do the same with a custom radio where the actual <input type="radio" /> is hidden?
https://stackblitz.com/edit/react-ts-7lgfpk?file=index.tsx
Instead of display:none;, you can keep your native radio buttons and just restyle them so that they don't seem visible, but still function as you expect.
Just one of the approaches you can try in your style.css:
.radioBtn input {
position:absolute;
opacity:0;
pointer-events:none;
}
Additionally, if you want to navigate with the tab key to your custom radio buttons group, you can enable that functionality to the radio label element:
const Radio = ({
id,
name,
value,
defaultChecked,
onChange,
children,
tabIndex
}) => (
<div
className="radioBtn"
>
<input
type='radio'
defaultChecked={defaultChecked}
value={value}
id={id}
name={name}
onChange={onChange}
tabIndex={tabIndex}
/>
<label className="radio" htmlFor={id} tabIndex={tabIndex}>
<span className="big">
<span className="small"></span>
</span>
<span>{children}</span>
</label>
</div>
);
Related
Unable to Check/Un-check custom checkbox.
Explanation: On commenting out dispaly:none I can view, check, uncheck the blue checkbox. But the custom Checkbox cannot be checked or unchecked.
This is the expected output where the blue checkbox is not displayed. However having problem to check or uncheck the custom checkboxes. Your help is appreciated. Thank you.
Like you already did with the input type checkbox for the onChange event, you should include the click event handler also for the labels performing the same action:
onClick={handleSelectAll} on the first label
onClick={() => onClickDOP(day)} on the other labels
suggestionsListComponent = (
<ul>
<li>
<Checkbox checked={selectAll} onChange={handleSelectAll} />
<label
className="custom-checkbox-label"
onClick={handleSelectAll}> <--------
All
</label>
</li>
{filteredSuggestions.map((day: any, index: any) => {
return (
<li key={day.id}>
<input
type="checkbox"
className=""
name={day?.name}
value={day?.name}
checked={day.active}
onChange={() => onClickDOP(day)}
/>
<label
className="custom-checkbox-label"
onClick={() => onClickDOP(day)} <--------
>
{day?.name}
</label>
</li>
);
})}
</ul>
);
How do I detect the event when tapping on an input?
I have a form where I have 5 inputs. I need to add a ccs class that changes the color of the label when the user changes from one input to another by tab
const InputGroup = function () {
const greating = function (e) {
console.log(e.target.value);
console.log("only clicked");
};
return (
<div className="input-group-with-icons">
<label htmlFor="name" className="form-label">
Name:
</label>
<div className="input-group">
<span className="input-group-text iconify" id="basic-addon1" data-icon="carbon:string-text" data-width="50" data-height="50"></span>
<input type="text" className="form-control" placeholder="Name" aria-label="name" aria-describedby="basic-addon1" name="name" onClick={greating} />
</div>
</div>
);
};
export default InputGroup;
I can't find a way to detect the tab event
enter image description here
You can use the focus event to detect focus in Javascript:
<input type="text" onfocus={focusinhandler} onfocusout={focusouthandler} />
If your goal is to changing styling, you can use the :focus selector in CSS:
.input-group-text.iconify:focus {
// Colour Change
}
which is applied when an element gains focus.
Okay, so in my code, I have these two radio inputs, one with a fixed value, one with an input-field to take the dynamic value.
Now what I wanted to do is, when the user enters value in the input field, the corresponding radio button will get selected automatically, and the values will get updated as well. and if the user selects the default value, the state will get updated with the default value.
My code looks like this..
<ul className='list-unstyled mb-0 d-flex flex-column flex-lg-row justify-content-around'>
<li className='mr-4'>
<input
defaultChecked
onChange={() => updateState('timeLimit',defaultTime)}
type="radio"
value={defaultTime}
name='time'
className='mr-2'
id="defaultTime"/>
<label htmlFor="defaultTime"> {defaultTime} Mins. (default)</label>
</li>
<li>
<input
onChange={(e) => updateState('timeLimit',e.target.value)}
type="radio"
name='time'
value={customTime}
ref={customTimeRef}
className='mr-2'
id="customTime"/>
<label htmlFor="customTime">
<input
onChange={(e) => updateCustomTime(e.target.value)}
style={{outline:'none', border:'none',width:'9rem'}}
placeholder='Enter Your Time'
min='0'
className='border-bottom border-info pl-2 pb-1'
type="number"/> Mins. (custom)
</label>
</li>
</ul>
The functions are defined as
const updateCustomTime = (val) => {
if(customTimeRef.current.checked){
setCustomTime(val)
updateState('timeLiimit',val)
}
else{
customTimeRef.current.checked=true
setCustomTime(val)
updateState('timeLiimit',val)
}
}
Now the issue is, when I type into my input field, the updateState function is fired, the radio gets checked, but if I click on the radio buttons afterwards, they aren't firing the onchange events associated.
What's wrong here ? And how to achieve the desired result ??
Check this component
use a boolean state to set the checked property
const App = () => {
const [useDefault, setUseDefault] = React.useState(true)
return (
<div>
<div>
<input type="radio" name="time" checked={useDefault} onClick={() => setUseDefault(true)} />
</div>
<div>
<input type="radio" name="time" checked={!useDefault} />
<input type="text" onKeyUp={() => setUseDefault(false)} />
</div>
</div>
)
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
I have a checkbox filters. The problem is that I need to display all checked checkbox label (e.g. if clicked Vimeo there should be a <h1> with Vimeo filter applied).
const checkboxTarget = ['Dailymotion', 'Vimeo', 'VK']
{checkboxTarget.map((text, index) => (
<div>
<input type="checkbox" id="flexCheckIndeterminate" />
<label style={{ marginLeft: '5px' }} class="form-check-label" for="flexCheckIndeterminate">
{text}
</label>
</div>
))}
In a functional component,
const[selectedCheckbox, setSelectedCheckbox] = useState("");
And then, add an OnClick Listener to the checkbox. Don't forget to check if the checkbox is checked. I would write a function to update SelectedCheckbox if multiple selection is a possibility.
<input type="checkbox" value={text} id="flexCheckIndeterminate" onClick={(e) => {if(e.target.checked){setSelectedCheckbox(e.target.value)} }} />
I want to have a radio button where I can navigate and select the value using the arrow on the keyboard.
I have no problem making one:
const BareRadio = ({
id,
name,
value,
defaultChecked,
onChange,
children,
tabIndex
}) => (
<div
>
<input
type='radio'
defaultChecked={defaultChecked}
value={value}
id={id}
name={name}
onChange={onChange}
tabIndex={tabIndex}
/>
<label htmlFor={id}>
<span >
<span ></span>
</span>
<span>{children}</span>
</label>
</div>
);
But now I have a custom radio button, which the structure hide the input tag and use css to mimic the label. Can I still use tabindex to achieve the same thing? or I need to use javascript?
demo https://stackblitz.com/edit/react-ts-7lgfpk?file=index.tsx