Skip to content

Commit

Permalink
fix primefaces#630 handle input value and selection separately in aut…
Browse files Browse the repository at this point in the history 
…ocomplete
  • Loading branch information
@Mobe91
Mobe91 committed Nov 9, 2018
1 parent 056373a commit f2d56f5
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 24 deletions.
4 changes: 3 additions & 1 deletion src/components/autocomplete/AutoComplete.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import TooltipOptions from '../tooltip/TooltipOptions';
interface AutoCompleteProps {
id?: string;
value?: any;
selection?: any;
name?: string;
suggestions?: any[];
field?: string;
Expand All @@ -30,7 +31,8 @@ interface AutoCompleteProps {
completeMethod?(e: {originalEvent: Event, query: string}): void;
itemTemplate?(data: any): JSX.Element | undefined;
selectedItemTemplate?(data: any): JSX.Element | undefined;
onChange?(e: {originalEvent: Event, value: any}): void;
onValueChange?(e: {originalEvent: Event, value: any}): void;
onSelectionChange?(e: {originalEvent: Event, value: any}): void;
onFocus?(event: Event): void;
onBlur?(event: Event): void;
onSelect?(e: {originalEvent: Event, value: any}): void;
Expand Down
74 changes: 51 additions & 23 deletions src/components/autocomplete/AutoComplete.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export class AutoComplete extends Component {
static defaultProps = {
id: null,
value: null,
selection: null,
name: null,
suggestions: null,
field: null,
Expand All @@ -40,7 +41,8 @@ export class AutoComplete extends Component {
completeMethod: null,
itemTemplate: null,
selectedItemTemplate: null,
onChange: null,
onValueChange: null,
onSelectionChange: null,
onFocus: null,
onBlur: null,
onSelect: null,
Expand All @@ -58,6 +60,7 @@ export class AutoComplete extends Component {
static propTypes = {
id: PropTypes.string,
value: PropTypes.any,
selection: PropTypes.any,
name: PropTypes.string,
suggestions: PropTypes.array,
field: PropTypes.string,
Expand All @@ -84,7 +87,8 @@ export class AutoComplete extends Component {
completeMethod: PropTypes.func,
itemTemplate: PropTypes.func,
selectedItemTemplate: PropTypes.func,
onChange: PropTypes.func,
onValueChange: PropTypes.func,
onSelectionChange: PropTypes.func,
onFocus: PropTypes.func,
onBlur: PropTypes.func,
onSelect: PropTypes.func,
Expand Down Expand Up @@ -122,7 +126,10 @@ export class AutoComplete extends Component {

let query = event.target.value;
if(!this.props.multiple) {
this.updateModel(event, query);
if (!query) {
this.updateModelWithSelection(event, null);
}
this.updateModelWithValue(event, query);
}

if(query.length === 0) {
Expand Down Expand Up @@ -178,13 +185,13 @@ export class AutoComplete extends Component {
if(this.props.multiple) {
this.inputEl.value = '';
if(!this.isSelected(option)) {
let newValue = this.props.value ? [...this.props.value, option] : [option];
this.updateModel(event, newValue);
let newSelection = this.props.selection ? [...this.props.selection, option] : [option];
this.updateModelWithSelection(event, newSelection);
}
}
else {
this.updateInputField(option);
this.updateModel(event, option);
this.updateModelWithSelection(event, option);
}

if(this.props.onSelect) {
Expand All @@ -196,10 +203,10 @@ export class AutoComplete extends Component {

this.inputEl.focus();
}
updateModel(event, value) {
if(this.props.onChange) {
this.props.onChange({

updateModelWithValue(event, value) {
if(this.props.onValueChange) {
this.props.onValueChange({
originalEvent: event,
value: value,
stopPropagation : () =>{},
Expand All @@ -213,6 +220,23 @@ export class AutoComplete extends Component {
}
}

updateModelWithSelection(event, value) {
this.updateModelWithValue(event, value);
if(this.props.onSelectionChange) {
this.props.onSelectionChange({
originalEvent: event,
value: value,
stopPropagation : () =>{},
preventDefault : () =>{},
target: {
name: this.props.name,
id: this.props.id,
value: value
}
});
}
}

formatValue(value) {
if(value) {
if (this.props.selectedItemTemplate) {
Expand Down Expand Up @@ -301,9 +325,9 @@ export class AutoComplete extends Component {
}

removeItem(event, index) {
let removedValue = this.props.value[index];
let newValue = this.props.value.filter((val, i) => (index !== i));
this.updateModel(event, newValue);
let removedValue = this.props.selection[index];
let newValue = this.props.selection.filter((val, i) => (index !== i));
this.updateModelWithSelection(event, newValue);

if(this.props.onUnselect) {
this.props.onUnselect({
Expand Down Expand Up @@ -383,9 +407,9 @@ export class AutoComplete extends Component {
switch(event.which) {
//backspace
case 8:
if(this.props.value && this.props.value.length && !this.inputEl.value) {
let removedValue = this.props.value[this.props.value.length - 1];
let newValue = this.props.value.slice(0, -1);
if(this.props.selection && this.props.selection.length && !this.inputEl.value) {
let removedValue = this.props.selection[this.props.selection.length - 1];
let newValue = this.props.selection.slice(0, -1);

if(this.props.onUnselect) {
this.props.onUnselect({
Expand All @@ -394,7 +418,7 @@ export class AutoComplete extends Component {
})
}

this.updateModel(event, newValue);
this.updateModelWithSelection(event, newValue);
}
break;

Expand Down Expand Up @@ -447,9 +471,9 @@ export class AutoComplete extends Component {

isSelected(val) {
let selected = false;
if(this.props.value && this.props.value.length) {
for(let i = 0; i < this.props.value.length; i++) {
if(ObjectUtils.equals(this.props.value[i], val)) {
if(this.props.selection && this.props.selection.length) {
for(let i = 0; i < this.props.selection.length; i++) {
if(ObjectUtils.equals(this.props.selection[i], val)) {
selected = true;
break;
}
Expand Down Expand Up @@ -501,7 +525,11 @@ export class AutoComplete extends Component {
this.searching = false;

if (this.inputEl && !this.props.multiple) {
this.updateInputField(this.props.value);
if (prevProps.selection !== this.props.selection || !this.props.value) {
this.updateInputField(this.props.selection);
} else {
this.updateInputField(this.props.value);
}
}

if (this.props.tooltip && prevProps.tooltip !== this.props.tooltip) {
Expand Down Expand Up @@ -547,8 +575,8 @@ export class AutoComplete extends Component {
}

renderChips() {
if(this.props.value && this.props.value.length) {
return this.props.value.map((val, index) => {
if(this.props.selection && this.props.selection.length) {
return this.props.selection.map((val, index) => {
return (
<li key={index + 'multi-item'} className="p-autocomplete-token p-highlight">
<span className="p-autocomplete-token-icon pi pi-fw pi-times" onClick={(e) => this.removeItem(e, index)}></span>
Expand Down

0 comments on commit f2d56f5

Please sign in to comment.