angular-tree-control
angular-tree-control copied to clipboard
Unable to focus on inputs when in mobile
Hello - great job on this; I've really enjoyed working with it. One issue I'm running into that I cannot figure out is focusing on inputs when in mobile. It seems like the tap event is being overridden by a different event. It works fine in desktop, but will not focus on inputs when viewed in mobile. The files are treeleafs. And the folders are tree branches. Any ideas what's going on?
isLeaf: function(node) {
if (node.placeHolder === 'true') return false;
if (node.item.objecttype === 'folder') return false;
if (node.item.objecttype === 'file') return true;
}
<treecontrol class="tree-classic"
tree-model="vm.repositoryfiles"
options="vm.treeOptions"
selected-node="selectedNode"
expanded-nodes="expandedNodes"
on-node-toggle="vm.toggleFolder(node, expanded)">
<!-- Add files and folders toolbar -->
<div ng-if="$index === 0 && $parentNode !== null" class="action-icons-container">
<div class="action-icons">
<span>
<h4>Add/Edit Items in
<span ng-if="vm.editingItemIsFolder === false || vm.editingId !== $parentNode.item.id ">{{$parentNode.item.foldername}}</span>
<span ng-if="vm.editingId === $parentNode.item.id && vm.editingItemIsFolder">{{vm.newItemName}}</span>
</h4>
<div ng-click="showme=true; editing=false" title="Add Subfolder" class="add-folder-icon">
<i class="fa fa-folder"></i>
</div>
<div class="add-file-icon" title="Add File To Folder">
<ng-form name="formPrimary">
<div class="grv-file-selector"
accept="image/*, video/*, application/pdf, application/msword, application/vnd.ms-excel,
application/vnd.ms-powerpoint, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,
application/vnd.openxmlformats-officedocument.presentationml.presentation,
application/vnd.openxmlformats-officedocument.wordprocessingml.document,
application/zip"
ngf-multiple=true ngf-select ngf-change="upload($files, $parentNode)" style="border-top: 0">
<div>
<span class="ng-click-active">
<i class="fa fa-file"></i>
</span>
<span ng-show="vm.upload_complete && vm.parentUpload == $parentNode.item.id" style="margin-left:20px">
<i class="fa fa-refresh fa-spin fa-lg"></i>
</span>
</div>
</div>
</ng-form>
</div>
<div>
<a ng-click="vm.startEditItem($parentNode.item.id,$parentNode.item.foldername,true); editing=true; showme=false" title="Edit Folder Name" class="edit-icon">
<i class="fa fa-pencil"></i>
</a>
</div>
<div>
<a ng-click="vm.removeFolder($parentNode.item.id,$parentNode.item.foldername)" title="Delete Folder" class="delete-icon">
<i class="fa fa-trash">
</i>
</a>
</div>
</span>
<div class="add-folder" ng-show="showme">
<input style="display: inline" ng-model="vm.newfoldername"
id="newfoldername" name="newfoldername" cols="1" rows="1"
placeholder="New Sub-Folder name" autocomplete="off" autocapitalize="off" autocorrect="off">
</input>
<a ng-click="vm.addFolder($parentNode.item.id, $parentNode)" autofocus="true"><i class="fa fa-plus" ng-click="showme=false;"></i></a><i class="fa fa-close" ng-click="showme=false" style="margin-left:15px;color:#1374b8"></i>
</div>
<!--<span class="fa-stack fa-lg">
<i ng-class="{'fa fa-chevron-right':!node.clicked,'fa fa-chevron-down':node.clicked}"></i>
</span>-->
<div ng-if="vm.editingId == $parentNode.item.id && vm.editingItemIsFolder" ng-show="editing">
<input style="display: inline" ng-model="vm.newItemName"
id="editfoldername" name="editfoldername" cols="1" rows="1" focus="true"
autocomplete="off" autocapitalize="off" autocorrect="off">
</input>
<a ng-click="vm.finishEditFolder($parentNode.item.id,$parentNode, vm.newItemName);" style="margin-right: 15px"><i class="fa fa-check"></i></a>
<a ng-click="vm.cancelEditItem();"><i class="fa fa-times"></i></a>
</div>
</div>
</div>
<div data-ng-if="node.item.objecttype === 'file'" class=file>
<div class="flex-container">
<a ng-click="vm.removeFile(node.item.id,node.item.filename, node, $parentNode)" title="Delete File" class="delete-icon">
<i class="fa fa-trash"></i>
</a>
<div class=" {{ vm.setIconBackgroundColor(node.item.filetype) }}">
<div class="file_icon">
<a href="{{ node.item.url }}" target="_blank">
<div class="{{ vm.setFileIcon(node.item.filetype) }}"></div>
</a>
</div>
</div>
<div class="file__content">
<h3 class="file__title" ng-if="vm.editingId != node.item.id || vm.editingItemIsFolder">{{ node.item.filename }}
<a ng-click="vm.startEditItem(node.item.id,node.item.filename,false)" title="Edit File Name" class="edit-icon">
<i class="fa fa-pencil"></i>
</a>
</h3>
<h3 ng-if="vm.editingId == node.item.id && !vm.editingItemIsFolder" class="file__title edit-mode">
<input style="display: inline" ng-model="vm.newItemName"
id="editfilename" name="editfilename" cols="1" rows="1"
autocomplete="off" autocapitalize="off" autocorrect="off">
</input>
<a ng-click="vm.finishEditFile(node.item.id,node.item.filename, node)" style="margin-right: 15px"><i class="fa fa-check"></i></a>
<a ng-click="vm.cancelEditItem()" style="margin-right: 10px"><i class="fa fa-times"></i></a>
</h3>
<p class="file__description" ng-if="vm.editingDescriptionId != node.item.id">
{{ node.item.description || 'Please add a description'}}
<a ng-click="vm.startEditDescription(node.item.id, node.item.description)" title="Edit Description" class="edit-icon">
<i style="font-size:13px" class="fa fa-pencil"></i>
</a>
</p>
<p class="file__description edit-mode" ng-if="vm.editingDescriptionId == node.item.id">
<textarea ng-model="vm.newItemDescription"
id="editdescription" name="editdescription" cols="1" rows="1"
autocomplete="off" autocapitalize="off" autocorrect="off">
</textarea>
<span ng-if="vm.newItemDescription.length < 67 || typeof(node.item.description) == 'undefined' "><a ng-click="vm.finishEditDescription(node.item.id,node.item.description, node)" style="margin-right:15px"><i class="fa fa-check"></i></a></span>
<span ng-if="vm.newItemDescription.length >= 67" style="display:block; margin-bottom: 10px; color:red">Description must be 66 Characters or less</span>
<a ng-click="vm.cancelEditDescription()" style="margin-right:10px"><i class="fa fa-times"></i></a>
Char: {{vm.newItemDescription.length || 0 }} / 66
</p>
<p class="file__creation-date">Uploaded {{ node.item.creationdate | date : 'medium'}}</p>
</div>
</div>
</div>
<div data-ng-if="node.item.objecttype === 'folder'" class="folder">
<div class="file_icon folder__container">
<div ng-if="vm.editingId != node.item.id || !vm.editingItemIsFolder" style="display: inline-block;position:relative;">
<!--<a ng-click="vm.downFolder({{node.item.id}},'{{node.item.foldername}}')">-->
<span class="fa-stack fa-lg chevrons">
<i ng-class="{'fa-chevron-right':!node.clicked,'fa-chevron-down':node.clicked, 'fa':true}"></i>
</span>
<span style="font-size: 14px">{{ node.item.foldername }}</span>
<!--</a>-->
</div>
<div ng-if="vm.editingId == node.item.id && vm.editingItemIsFolder">
<span class="fa-stack fa-lg chevrons">
<i ng-class="{'fa-chevron-right':!node.clicked,'fa-chevron-down':node.clicked, 'fa':true}"></i>
</span>
<span style="font-size: 14px">{{ vm.newItemName }}</span>
</div>
</div>
</div>
</treecontrol>