diff --git a/src/components/Lookup/__test__/selectedValue.spec.js b/src/components/Lookup/__test__/selectedValue.spec.js
index 768b2b667..39843d692 100644
--- a/src/components/Lookup/__test__/selectedValue.spec.js
+++ b/src/components/Lookup/__test__/selectedValue.spec.js
@@ -3,7 +3,7 @@ import { mount } from 'enzyme';
import copyFn from 'clipboard-copy';
import ButtonIcon from '../../ButtonIcon';
import SelectedValue from '../selectedValue';
-import StyledSelectedValueIcon from '../styled/selectedValueIcon';
+import StyledSelectedIconContainer from '../styled/selectedIconContainer';
jest.mock('clipboard-copy');
@@ -22,14 +22,14 @@ describe('', () => {
});
it('should not render an icon container', () => {
const component = mount();
- expect(component.find(StyledSelectedValueIcon).exists()).toBe(false);
+ expect(component.find(StyledSelectedIconContainer).exists()).toBe(false);
});
it('should render an icon container', () => {
const component = mount();
- expect(component.find(StyledSelectedValueIcon).exists()).toBe(true);
+ expect(component.find(StyledSelectedIconContainer).exists()).toBe(true);
});
it('should render a close button', () => {
- const component = mount();
+ const component = mount( {}} />);
expect(component.find(ButtonIcon).exists()).toBe(true);
});
it('should fire an event when the close button is clicked', () => {
diff --git a/src/components/Lookup/pageObject/index.js b/src/components/Lookup/pageObject/index.js
index 53f88815e..d8db4cb27 100644
--- a/src/components/Lookup/pageObject/index.js
+++ b/src/components/Lookup/pageObject/index.js
@@ -42,6 +42,7 @@ class PageLookup {
async clickSelectedOptionInput() {
await $(this.rootElement)
.$('input[type="text"]')
+ .parentElement()
.click();
}
@@ -61,7 +62,7 @@ class PageLookup {
*/
async clickRemoveSelectedOptionButton() {
await $(this.rootElement)
- .$('button[title="Remove selected option"]')
+ .$('button[title="Close"]')
.click();
}
@@ -94,7 +95,7 @@ class PageLookup {
*/
async hasFocusRemoveSelectedOptionButton() {
return $(this.rootElement)
- .$('button[title="Remove selected option"]')
+ .$('button[title="Close"]')
.isFocused();
}
diff --git a/src/components/Lookup/selectedValue.js b/src/components/Lookup/selectedValue.js
index e2abc7a5a..7a9d7bf9f 100644
--- a/src/components/Lookup/selectedValue.js
+++ b/src/components/Lookup/selectedValue.js
@@ -3,19 +3,19 @@ import PropTypes from 'prop-types';
import copy from 'clipboard-copy';
import formatValue from './helpers/formatValue';
import RenderIf from '../RenderIf/index';
-import CloseIcon from '../Chip/closeIcon';
-import ButtonIcon from '../ButtonIcon/index';
import StyledReadOnlySelectedInput from './styled/input';
-import StyledSelectedInput from './styled/selectedInput';
import StyledSelectedValueIcon from './styled/selectedValueIcon';
import StyledSelectedValueContainer from './styled/selectedValueContainer';
-import StyledSelectedValueClearButton from './styled/selectedValueClearButton';
+import { StyledCombobox, StyledInput } from '../MultiSelect/styled';
+import StyledChip from './styled/chip';
+import StyledSelectedIconContainer from './styled/selectedIconContainer';
export default class SelectedValue extends Component {
constructor(props) {
super(props);
this.inputRef = React.createRef();
this.handleFocus = this.handleFocus.bind(this);
+ this.handleClick = this.handleClick.bind(this);
}
handleFocus() {
@@ -24,6 +24,14 @@ export default class SelectedValue extends Component {
copy(label);
}
+ handleClick(event) {
+ const { disabled, onClick } = this.props;
+ if (!disabled) {
+ this.inputRef.current.focus();
+ }
+ onClick(event);
+ }
+
/**
* Sets focus on the element.
* @public
@@ -48,14 +56,15 @@ export default class SelectedValue extends Component {
this.inputRef.current.blur();
}
- renderInput() {
+ render() {
const {
- id,
- name,
value,
disabled,
- tabIndex,
readOnly,
+ onClearValue,
+ id,
+ name,
+ tabIndex,
required,
onClick,
errorMessageId,
@@ -64,72 +73,67 @@ export default class SelectedValue extends Component {
} = this.props;
const { label, icon } = formatValue(value);
- if (readOnly) {
- return (
-
- );
- }
- return (
-
- );
- }
-
- render() {
- const { value, disabled, readOnly, onClearValue } = this.props;
- const { icon } = formatValue(value);
-
return (
-
- {icon}
+
+
+
+ {icon}
+
+
+
-
- {this.renderInput()}
-
-
- }
- onClick={onClearValue}
+
+
+
+
+
+ {icon}
+
+
+ {label}
+
+ }
+ onDelete={onClearValue}
+ borderRadius={borderRadius}
/>
-
+
);
diff --git a/src/components/Lookup/styled/chip.js b/src/components/Lookup/styled/chip.js
new file mode 100644
index 000000000..a40aed5e7
--- /dev/null
+++ b/src/components/Lookup/styled/chip.js
@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+import attachThemeAttrs from '../../../styles/helpers/attachThemeAttrs';
+import Chip from '../../Chip';
+
+const StyledChip = attachThemeAttrs(styled(Chip))`
+ flex: 1 1 auto;
+ margin: 2px;
+ background-color: ${props => props.palette.background.main};
+`;
+
+export default StyledChip;
diff --git a/src/components/Lookup/styled/selectedIconContainer.js b/src/components/Lookup/styled/selectedIconContainer.js
new file mode 100644
index 000000000..7e6bc1ab5
--- /dev/null
+++ b/src/components/Lookup/styled/selectedIconContainer.js
@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+const StyledSelectedIconContainer = styled.span`
+ margin-right: 0.8rem;
+`;
+
+export default StyledSelectedIconContainer;
diff --git a/src/components/Lookup/styled/selectedValueClearButton.js b/src/components/Lookup/styled/selectedValueClearButton.js
deleted file mode 100644
index cd1982087..000000000
--- a/src/components/Lookup/styled/selectedValueClearButton.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import styled from 'styled-components';
-import attachThemeAttrs from '../../../styles/helpers/attachThemeAttrs';
-
-const StyledSelectedValueClearButton = attachThemeAttrs(styled.span)`
- height: 100%;
- right: 0.5rem;
- position: absolute;
- line-height: 1;
- z-index: 2;
- display: inline-flex;
- align-items: center;
- justify-content: center;
- fill: ${props => props.palette.border.main};
-`;
-
-export default StyledSelectedValueClearButton;