I have list of dropdown options which user can select.
optinos in dropdown are made with tag: < a href>:
<a onClick={() => handleSelect(filter)} role="button">
{filter.name}
</a>
Problem is cus I must add tabIndex="0" or -1, to fix error from Eslint.
But When I add tabIndex=0, my button does not work anymore.
Is there are any other way to fix this error?
This is how looks dropdown component:
<ul name="filters" className="dropdown">
{filterOptions.map((filter) => (
<li
key={filter.id}
defaultChecked={filter.name}
name={filter.name}
className={`option option-${filter.selected ? 'selected' : 'unselected'}`}
>
<span className={`option-${filter.selected ? 'checked-box' : 'unchecked-box'} `} />
<a onClick={() => handleSelect(filter)} role="button">
{filter.name}
</a>
</li>
))}
</ul>
Buttons are interactive controls and thus focusable. If the button
role is added to an element that is not focusable by itself (such as
<span>, <div> or <p>) then, the tabindex attribute has to be used to
make the button focusable.
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role#Accessibility_concerns
The HTML attribute tabindex corresponds to the attribute tabIndex in
React.
https://reactjs.org/docs/dom-elements.html
So I think #S.. answer is correct:
<a
onClick={() => handleSelect(filter)}
role="button"
tabIndex={0}
>
{filter.name}
</a>
Add a tabindex:
<a onClick={() => handleSelect(filter)} role="button" tabIndex={i}>
{filter.name}
</a>
after first adding an iterator to your map: (filter, i)
Related
I'm currently using Kendo Grid for ASP.Net Core MVC.
So, I created a column with a group of options.
columns.Template("<div class='btn-group'></div>")
.Title("").Width(100);
Then with jquery:
$(this).find(".btn-group").append("<button type='button' class='btn btn-light btn-sm dropdown-toggle' data-bs-toggle='dropdown' aria-expanded='false'>Actions<i class='mdi mdi-chevron-down'></i>.
</button>
<ul class='dropdown-menu dropdown-menu-end'>
<li>
<a href='advertisers/edit/#Html.Raw(Model.Select(x => x.AdvertiserId));'>
<button class='dropdown-item' type='button'>Edit</button></a>
</li>
<li>
<button class='dropdown-item text-danger' type='button'>Mark Inactive</button>
</li>
</ul>");
As you can see I have a button Edit pass the Model.Id from the referenced model, I tried:
#Html.Raw(Model.Select(x => x.AdvertiserId))
Or
#Model.Select(x => x.AdvertiserId)
When I try this the URL shows as:
edit/System.Linq.Enumerable+SelectListIterator%602[Lib.Models.Advertiser,System.Int32];
But none of them works; how can I get this done? Regards
UPDATE:
I added the Id as a hidden column:
columns.Bound(x => x.AdvertiserId)
.Hidden();
So I can access all of them with jQuery as: dataItem.AdvertiserId
How can I add it on each row <a href='advertisers/edit/'> ?
If you want to pass an array into query,try to use:
<a href='advertisers/edit#(Html.Raw("?AdvertiserId="+String.Join("&AdvertiserId=", Model.Select(x => x.AdvertiserId).ToArray())))'>
<button class='dropdown-item' type='button'>Edit</button></a>
And use action like this:
public IActionResult edit(int[] AdvertiserId){
...
}
I fix this by adding the Url as a constant like:
const advertiserEditUrl = 'advertisers/edit?advertiserId=' + dataItem.AdvertiserId;
Then in href
<a href='"+ advertiserEditUrl +"'></a>
Basically I need to show and Hide the div , Up and Down Arrow Icons should change accordingly. As of Now only UP arrow Icon is working and displaying the div , but when i try to hide the div, it is not working....I did like this and its not working , What wrong in my code? Can Anyone help me in this?
Here is my Code
const [expand, setExpand] = useState(false);
<div onClick={() => setExpand(true)}>
Accordion
<i className={`fas fa-chevron-up ${!expand ? 'fas fa-chevron-down' : ''}`}></i>
</div>
{expand && <div className="Accordion-Section"></div>}
You can set the className like this
<div onClick={() => setExpand(!expand)}>
Accordion
<i className={`fas ${expand ? 'fa-chevron-up' : 'fa-chevron-down'}`} />
</div>
{expand && <div className="Accordion-Section"></div>}
The click handler is setting the state true everytime.
You should change it to <div onClick={() => setExpand(!expand)}>.
you should change "i" tag to this:
<i className={${!expand ? "fas fa-chevron-down" : "fas fa-chevron-up"}}>
i am trying to hide a div when it is in mobile view i am using a ternory operator and i am getting error i cannot compltely hide the div becase it already has a ternory operator inside it how can i achive this
{this.state.hidediv?
(<div className="livechat">): (<div className="livechat2">)
} //error here
{this.state.hidecaht ? (
<>
<a
href="#"
className="close"
onClick={() => this.hidechat(true)}
></a>
<Livechat id={this.state.liveid} />
</>
) : null}
</div>
livechat2 has css display:none so it wont show up
img
The issue is that you give an unclosed tag, try this:
<div className={this.state.hidediv ? "livechat" : "livechat2"}>
{this.state.hidecaht &&
<>
<a
href="#"
className="close"
onClick={() => this.hidechat(true)}
></a>
<Livechat id={this.state.liveid} />
</>
}
</div>
I have a custom toggle dropdown:
import React from 'react';
import 'react-datepicker/dist/react-datepicker.css';
const DateRange = props => (
<div className="dropdown artesianDropdownContanier">
<div className="btn-group width100">
<button type="button" className="btn dropdown-width">{props.selected}</button>
<button type="button" className="btn dropdown-toggle dropdown-toggle-split artesianDropdownToggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span className="sr-only">Toggle Dropdown</span>
</button>
<div className="dropdown-menu artesianDropdown">
{props.dropDownValues.map(val => (
<span
key={val}
value={val}
className={`dropdown-item ${props.dropdownItemClass}`}
onClick={() => props.onClick(val)}
aria-hidden="true"
>
{val}
</span>
))
}
</div>
</div>
</div>
);
export default DateRange;
Wich looks like this on the page:
When I go to resize the webpage the arrow portion of the component spills out of its bootstrap container:
If I set display on the arrow to "none" you can see that the dropdown button itself with the text is resizing perfectly. It seems to be the dropdown arrow portion which is giving me trouble.
Any ideas on how to keep this guy firmly in his parent container?
Thanks!
Try adding this style to the component containing {props.selected} :
<button
type="button"
className="btn dropdown-width"
style={{
textOverflow: 'ellipsis',
overflow: 'hidden'
}}
>
{props.selected}
</button>
This should replace the end of the {props.selected} text by 3 dots and let the place to the dropdown button. (some adjustments may be needed depending on your dropdown-width class)
I have struggling with the syntax with angularjs (used in nodered). I want to set diffrent bootstrap classes on each row depending on the workorder.state in a list.
if the "if statement are true" it should use success class. But the if are never true it always use default "info". Even if the output of {{workorder.state}} are "Ready". Any suggestions?
<div class="list-group" ng-repeat="workorder in workorders">
<button type="button" class="ng-class:{{workorder.state}} === 'Ready' ? list-group-item list-group-item-success responsive-width : list-group-item list-group-item-info responsive-width;">
<span class="brnodisplay">{{workorder.state}}</span>
</button>
</div>
I get below error in browser console.
app.min.js:142 Error: [$parse:syntax]
http://errors.angularjs.org/1.5.10/$parse/syntax?p0=%7B&p1=invalid%20key&p2…
ve-width%20%3A%20list-group-item%20list-group-item-info%20responsive-width
at http://127.0.0.1:1880/ui/js/app.min.js:29:426
at throwError (http://127.0.0.1:1880/ui/js/app.min.js:256:200)
at t.object (http://127.0.0.1:1880/ui/js/app.min.js:256:33)
at t.primary (http://127.0.0.1:1880/ui/js/app.min.js:252:151)
at t.unary (http://127.0.0.1:1880/ui/js/app.min.js:251:503)
at t.multiplicative (http://127.0.0.1:1880/ui/js/app.min.js:251:249)
at t.additive (http://127.0.0.1:1880/ui/js/app.min.js:251:76)
at t.relational (http://127.0.0.1:1880/ui/js/app.min.js:250:416)
at t.equality (http://127.0.0.1:1880/ui/js/app.min.js:250:241)
at t.logicalAND (http://127.0.0.1:1880/ui/js/app.min.js:250:94)
You don't have to use interpolation {{}} and filter common classes(which should be there irrespective of the check) to class.
HTML:
<div class="list-group" ng-repeat="workorder in workorders">
<button type="button" class="list-group-item responsive-width" ng-class="{'list-group-item-success': workorder.state === 'Ready' ,'list-group-item-info':'workorder.state !== 'Ready' }">
<span class="brnodisplay">{{workorder.state}}</span>
</button>
</div>
For more reference:
Adding multiple class using ng-class
https://docs.angularjs.org/api/ng/directive/ngClass
Try changing your ng-class to this (ng-class is used in lieu of class, not in addition to as you have used):
ng-class="workorder.state === 'Ready' ? 'list-group-item list-group-item-success responsive-width' : 'list-group-item list-group-item-info responsive-width'"
https://docs.angularjs.org/api/ng/directive/ngClass
<div class="list-group" ng-repeat="workorder in workorders">
<button type="button" class="list-group-item responsive-width" ng-class="{'list-group-item-success': workorder.state === 'Ready' , 'list-group-item-info': workorder.state !== 'Ready' }">
<span class="brnodisplay">{{workorder.state}}</span>
</button>
</div>