Combine fetching Remote Data with creating new items

[mrwunderbar666]

I am exploring this cool library and I got stuck when I tried to enhance the GitHub remote data example.

When I allow the user to create a new item with create: true it only works as long as there are no custom render functions.

Any help would be highly appreciated!

This works:

new TomSelect('#select-repo',{
		create: true,
		valueField: 'url',
		labelField: 'name',
		searchField: 'name',
		// fetch remote data
		load: function(query, callback) {

			var url = 'https://api.github.com/search/repositories?q=' + encodeURIComponent(query);
			fetch(url)
				.then(response => response.json())
				.then(json => {
					callback(json.items);
				}).catch(()=>{
					callback();
				});

		}
	});

This doesn't:

new TomSelect('#select-repo',{
		create: function(input, callback) {
    	var returnData = {
      	value:input,
        text:input,
        name:input,
        description:'none',
        owner: {
        	login:'none',
          avatar_url: 'none' 
        }
      };
      callback(returnData);
    },
		valueField: 'url',
		labelField: 'name',
		searchField: 'name',
		// fetch remote data
		load: function(query, callback) {

			var url = 'https://api.github.com/search/repositories?q=' + encodeURIComponent(query);
			fetch(url)
				.then(response => response.json())
				.then(json => {
					callback(json.items);
				}).catch(()=>{
					callback();
				});

		},
		// custom rendering functions for options and items
		render: {
			option: function(item, escape) {
				return `<div class="py-2 d-flex">
							<div class="icon me-3">
								<img class="img-fluid" src="${item.owner.avatar_url}" />
							</div>
							<div>
								<div class="mb-1">
									<span class="h4">
										${ escape(item.name) }
									</span>
									<span class="text-muted">by ${ escape(item.owner.login) }</span>
								</div>
						 		<div class="description">${ escape(item.description) }</div>
							</div>
						</div>`;
			},
			item: function(item, escape) {
				return `<div class="py-2 d-flex">
							<div class="icon me-3">
								<img class="img-fluid" src="${item.owner.avatar_url}" />
							</div>
							<div>
								<div class="mb-1">
									<span class="h4">
										${ escape(item.name) }
									</span>
									<span class="text-muted">by ${ escape(item.owner.login) }</span>
								</div>
						 		<div class="description">${ escape(item.description) }</div>
							</div>
						</div>`;
			}
		},
	});

[oyejorge]

The problem is the returnData in your create method. The object you're trying to create doesn't have a parameter matching your valueField which is url. This create method will work

create: function(input, callback) {
	var returnData = {
		value:input,
		text:input,
		name:input,
		description:'none',
		owner: {
			login:'none',
			avatar_url: 'none' 
		},
		url: 'a-url',
	};
	callback(returnData);
},

[mrwunderbar666]

Thanks! That did the trick!