fix: custom class prop update should not be cumulative (#349)

* fix: make custom classes update instead of stack up

* test: coverage for custom classes

src/components/IntlTelInput.js

@@ -1257,14 +1257,16 @@ class IntlTelInput extends Component {
  }
 
  render() {
- this.wrapperClass[this.props.containerClassName] = true
  const inputClass = this.props.inputClassName
  const wrapperStyle = Object.assign({}, this.props.style || {})
 
  this.wrapperClass['allow-dropdown'] = this.allowDropdown
  this.wrapperClass.expanded = this.state.showDropdown
 
- const wrapperClass = classNames(this.wrapperClass)
+ const wrapperClass = classNames(
+ this.wrapperClass,
+ this.props.containerClassName
+ )
 
  const titleTip = this.selectedCountryData
  ? `${this.selectedCountryData.name}: +${this.selectedCountryData.dialCode}`

src/components/__tests__/IntlTelInput.test.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+
+import IntlTelInput from '../IntlTelInput'
+
+describe('Style customization', () => {
+ it('correctly applies user-supplied classes on outer container', () => {
+ const component = shallow(<IntlTelInput />)
+ const mockClass = 'mock-class-1'
+ component.setProps({ containerClassName: mockClass })
+ expect(component.props().className).toMatchInlineSnapshot(
+ `"allow-dropdown mock-class-1"`
+ )
+ const otherMockClass = 'mock-class-2'
+ component.setProps({ containerClassName: otherMockClass })
+ expect(component.props().className).toMatchInlineSnapshot(
+ `"allow-dropdown mock-class-2"`
+ )
+ })
+})