diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx index 3b8d6333..4529f513 100644 --- a/client/src/components/info.component.jsx +++ b/client/src/components/info.component.jsx @@ -22,7 +22,7 @@ class InfoComponent extends preact.Component { componentDidUpdate(prevProps) { // Catch case where mouse events don't properly clear state and info changed - if (prevProps.info !== this.props.info) this.setState({ comboItem: null }); + if (prevProps.info !== this.props.info && this.state.comboItem) this.setState({ comboItem: null }); } render(args) { diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx index a3e01b54..d9589c2c 100644 --- a/client/src/components/vbox.component.jsx +++ b/client/src/components/vbox.component.jsx @@ -287,7 +287,7 @@ class Vbox extends preact.Component { const combinerItems = combiner.map(j => vbox.bound[j]); const combinerCount = countBy(combinerItems, co => co); - const comboHighlight = combinerItems.length > 0 && itemInfo.combos.some(combo => { + const comboItem = itemInfo.combos.find(combo => { if (combo.components.includes(v)) { return combinerItems.every(c => { if (!combo.components.includes(c)) return false; @@ -297,7 +297,8 @@ class Vbox extends preact.Component { return true; }); } return false; - }) ? 'combo-border' : ''; + }); + const comboHighlight = combinerItems.length > 0 && comboItem ? 'combo-border' : ''; function onClick(type) { if (vboxSelecting) clearVboxSelected(); @@ -323,6 +324,7 @@ class Vbox extends preact.Component { } combiner.push(i); + if (combiner.length === 3) setInfo(comboItem.item); return combinerChange(combiner); }