Skip to content
This repository has been archived by the owner on Oct 2, 2019. It is now read-only.

Commit

Permalink
fix(bootstrap): remove anchor tag in choices
Browse files Browse the repository at this point in the history 
Resolves issue where page was reloaded when clicking on choice as 
it was nested in an anchor tag.

Switches to using a span tag instead.
  • Loading branch information
@alaingilbert @user378230
alaingilbert authored and user378230 committed Jul 30, 2016
1 parent 176182e commit b15189d
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 6 deletions.
2 changes: 1 addition & 1 deletion src/bootstrap/choices.tpl.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<div ng-show="$select.isGrouped" class="ui-select-choices-group-label dropdown-header" ng-bind="$group.name"></div>
<div ng-attr-id="ui-select-choices-row-{{ $select.generatedId }}-{{$index}}" class="ui-select-choices-row"
ng-class="{active: $select.isActive(this), disabled: $select.isDisabled(this)}" role="option">
<a href="" class="ui-select-choices-row-inner"></a>
<span class="ui-select-choices-row-inner"></span>

This comment has been minimized.

Sign in to view

Copy link
@viveleroi

viveleroi Aug 19, 2016

I don't see why the whole element was changed when the core issue was the href="". Removing that would affect only the cursor which you're already setting in the css. From a semantic perspective these really should have remained anchors.

This comment has been minimized.

Sign in to view

Copy link
@user378230

user378230 Aug 20, 2016

Contributor

What's your justification for that claim?

Do you have any examples of other select libraries that use anchor tags? Maybe so links to appropriate documentation/articles?

I think I went with the complete removal as there was another issue related to them, I can't remember the specifics though.
</div>
</li>
</ul>
11 changes: 6 additions & 5 deletions src/common.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -220,7 +220,8 @@ body > .ui-select-bootstrap.open {
border-right: 1px solid #428bca;
}

.ui-select-bootstrap .ui-select-choices-row>a {
.ui-select-bootstrap .ui-select-choices-row>span {
cursor: pointer;
display: block;
padding: 3px 20px;
clear: both;
Expand All @@ -230,21 +231,21 @@ body > .ui-select-bootstrap.open {
white-space: nowrap;
}

.ui-select-bootstrap .ui-select-choices-row>a:hover, .ui-select-bootstrap .ui-select-choices-row>a:focus {
.ui-select-bootstrap .ui-select-choices-row>span:hover, .ui-select-bootstrap .ui-select-choices-row>span:focus {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}

.ui-select-bootstrap .ui-select-choices-row.active>a {
.ui-select-bootstrap .ui-select-choices-row.active>span {
color: #fff;
text-decoration: none;
outline: 0;
background-color: #428bca;
}

.ui-select-bootstrap .ui-select-choices-row.disabled>a,
.ui-select-bootstrap .ui-select-choices-row.active.disabled>a {
.ui-select-bootstrap .ui-select-choices-row.disabled>span,
.ui-select-bootstrap .ui-select-choices-row.active.disabled>span {
color: #777;
cursor: not-allowed;
background-color: #fff;
Expand Down

0 comments on commit b15189d

Please sign in to comment.