diff --git a/components/atom/input/demo/index.js b/components/atom/input/demo/index.js
index e843b50e7..faba06d87 100644
--- a/components/atom/input/demo/index.js
+++ b/components/atom/input/demo/index.js
@@ -151,6 +151,28 @@ const TypeDemo = () => {
)
}
],
+ [
+ 'MASK WITH RIGHT ICON',
+ {
+ type: inputTypes.MASK,
+ mask: {mask: Number},
+ placeholder: 'ES00 0000 0000 00 0000000000',
+ charsSize: 31,
+ value: '100000',
+ rightIcon: '€',
+ radix: ',',
+ thousandsSeparator: '.',
+ mapToRadix: ['.']
+ },
+ {
+ description: (
+ <>
+ Let the user define its own mask for custom purposes. More info at{' '}
+ http://shorturl.at/foBF1
+ >
+ )
+ }
+ ],
[
'NUMBER',
{
diff --git a/components/atom/input/src/Mask/iMask.js b/components/atom/input/src/Mask/iMask.js
index 03a3efd58..e25003319 100644
--- a/components/atom/input/src/Mask/iMask.js
+++ b/components/atom/input/src/Mask/iMask.js
@@ -1,6 +1,6 @@
import {IMaskMixin} from 'react-imask'
-import Input from '../Input/Component/index.js'
+import Input from '../Input/index.js'
const IMask = IMaskMixin(({inputRef, value, size, ...props}) => {
return
diff --git a/components/atom/input/test/index.test.js b/components/atom/input/test/index.test.js
index 9931cd7f2..800b297f8 100644
--- a/components/atom/input/test/index.test.js
+++ b/components/atom/input/test/index.test.js
@@ -387,6 +387,32 @@ describe(json.name, () => {
expect(findClassName(container.innerHTML)).to.be.null
expect(value).to.equal('')
})
+
+ it('should be able to display addons', () => {
+ const props = {
+ className: 'extended-classNames',
+ type: pkg.inputTypes.MASK,
+ mask: {mask: Number},
+ placeholder: 'Ex: 100.000,00',
+ charsSize: 31,
+ value: '100000',
+ rightIcon: '€',
+ radix: ',',
+ thousandsSeparator: '.',
+ mapToRadix: ['.'],
+ leftAddon: 'leftAddon',
+ rightAddon: 'rightAddon'
+ }
+
+ // When
+ const {getByRole, getByText} = setup(props)
+ const input = getByRole('textbox')
+
+ // Then
+ expect(input).to.have.value('100.000')
+ expect(getByText('leftAddon')).to.exist
+ expect(getByText('rightAddon')).to.exist
+ })
})
describe(`${Component.displayName} ${pkg.inputTypes.SUI_PASSWORD}`, () => {