wix-incubator / angular-tree-control

Angular JS Tree
http://wix.github.io/angular-tree-control
MIT License
707 stars 276 forks source link

Unable to focus on inputs when in mobile #238

Open nathanminarik opened 8 years ago

nathanminarik commented 8 years ago

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>
screen shot 2016-06-28 at 2 35 56 pm screen shot 2016-06-28 at 2 35 06 pm