diff --git a/.changelog/9715.txt b/.changelog/9715.txt new file mode 100644 index 000000000..d0fd55a0a --- /dev/null +++ b/.changelog/9715.txt @@ -0,0 +1,3 @@ +```release-note:bug +ui: Fixed a bug in older browsers relating to String.replaceAll and fieldset w/flexbox usage +``` diff --git a/ui/packages/consul-ui/app/components/form-group/element/index.js b/ui/packages/consul-ui/app/components/form-group/element/index.js index 0d319fc89..c76c2d7ad 100644 --- a/ui/packages/consul-ui/app/components/form-group/element/index.js +++ b/ui/packages/consul-ui/app/components/form-group/element/index.js @@ -21,7 +21,10 @@ export default class Element extends Component { } } get prop() { - return `${this.args.name.toLowerCase().replaceAll('.', '-')}`; + return `${this.args.name + .toLowerCase() + .split('.') + .join('-')}`; } get state() { const error = this.touched && this.args.error; diff --git a/ui/packages/consul-ui/app/components/freetext-filter/index.hbs b/ui/packages/consul-ui/app/components/freetext-filter/index.hbs index 8c70ff8b8..9fe1ae114 100644 --- a/ui/packages/consul-ui/app/components/freetext-filter/index.hbs +++ b/ui/packages/consul-ui/app/components/freetext-filter/index.hbs @@ -1,4 +1,4 @@ -
@@ -16,4 +16,4 @@ /> {{yield}} -
\ No newline at end of file + \ No newline at end of file diff --git a/ui/packages/consul-ui/app/components/freetext-filter/layout.scss b/ui/packages/consul-ui/app/components/freetext-filter/layout.scss index 57fc5b72a..03e1e7d2f 100644 --- a/ui/packages/consul-ui/app/components/freetext-filter/layout.scss +++ b/ui/packages/consul-ui/app/components/freetext-filter/layout.scss @@ -4,6 +4,7 @@ display: flex; position: relative; height: var(--height); + width: 100%; } &_input, & > label { diff --git a/ui/packages/consul-ui/app/utils/intl/missing-message.js b/ui/packages/consul-ui/app/utils/intl/missing-message.js index f156fb93c..7e9c3c945 100644 --- a/ui/packages/consul-ui/app/utils/intl/missing-message.js +++ b/ui/packages/consul-ui/app/utils/intl/missing-message.js @@ -4,6 +4,7 @@ export default function missingMessage(key, locales) { const last = key .split('.') .pop() - .replaceAll('-', ' '); + .split('-') + .join(' '); return `${last.substr(0, 1).toUpperCase()}${last.substr(1)}`; }