diff --git a/client/modules/IDE/components/QuickAddList/QuickAddList.jsx b/client/modules/IDE/components/QuickAddList/QuickAddList.jsx
index e4d5e6d7..fe32168d 100644
--- a/client/modules/IDE/components/QuickAddList/QuickAddList.jsx
+++ b/client/modules/IDE/components/QuickAddList/QuickAddList.jsx
@@ -7,12 +7,19 @@ import Icons from './Icons';
const Item = ({
isAdded, onSelect, name, url
}) => (
-
+ { /* eslint-disable-line */ }
- View
+ {name}
+ e.stopPropogation()}
+ >
+ View
+
);
@@ -45,7 +52,10 @@ const QuickAddList = ({
key={item.id}
{...item}
onSelect={
- () => handleAction(item)
+ (event) => {
+ event.target.blur();
+ handleAction(item);
+ }
}
/>))}
diff --git a/client/styles/components/_quick-add.scss b/client/styles/components/_quick-add.scss
index 78671f78..8070e3c3 100644
--- a/client/styles/components/_quick-add.scss
+++ b/client/styles/components/_quick-add.scss
@@ -29,7 +29,9 @@
.quick-add__item-toggle {
display: flex;
align-items: center;
+}
+.quick-add__item-name {
flex: 1;
}
@@ -83,8 +85,10 @@
transform: rotate(45deg);
}
+.quick-add__item:hover,
.quick-add__item-toggle:hover,
.quick-add__item-toggle:focus {
+ cursor: pointer;
@include themify() {
.quick-add__icon {
polygon {
@@ -97,11 +101,11 @@
}
}
- .quick-add__in-icon {
+ & .quick-add__in-icon {
display: none;
}
- .quick-add__icon--in-collection {
+ & .quick-add__icon--in-collection {
.quick-add__remove-icon {
display: inline-block;
}
@@ -111,7 +115,7 @@
}
}
- .quick-add__icon--not-in-collection {
+ & .quick-add__icon--not-in-collection {
.quick-add__add-icon {
display: inline-block;
}