Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tab emits strange character? #4068

Closed
lucasgodshalk opened this issue Apr 22, 2016 · 1 comment
Closed

Tab emits strange character? #4068

lucasgodshalk opened this issue Apr 22, 2016 · 1 comment
Labels
component: tabs This is the name of the generic UI component, not the React module!

Comments

@lucasgodshalk
Copy link

lucasgodshalk commented Apr 22, 2016

Problem Description

I have a simple tab control that is emitting a  character with no obvious reason why. The character disappears depending on what kind of content is in the tab. Adding multiple tabs causes the character to be carried with the highlighter for which tab is selected. I'm using babel to transpile, but the output seems harmless.

app.jsx:

import React from "react";
import ReactDOM from "react-dom";

import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();

import Tabs from 'material-ui/lib/tabs/tabs';
import Tab from 'material-ui/lib/tabs/tab';

var temp = (
    <Tabs>
        <Tab label="test">
            <p>Hello world</p>
        </Tab>
    </Tabs>
);

ReactDOM.render(temp, document.getElementById("app"));

untitled

I've included the output html as well, you can see the character getting inserted with a div:
output.txt

Versions

  • Material-UI: 0.14.4
  • React: 0.14.7
  • Browser: Latest chrome & firefox
@tintin1343
Copy link
Contributor

I tried recreating the issue in the examples project.

screen shot 2016-04-22 at 12 01 26 pm

i did not face any issue.

heres my code:

Main.js
/**

  • In this file, we create a React component
  • which incorporates components providedby material-ui.
    */

import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';
import Dialog from 'material-ui/Dialog';
import {deepOrange500} from 'material-ui/styles/colors';
import FlatButton from 'material-ui/FlatButton';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import Tabs from 'material-ui/tabs/tabs';
import Tab from 'material-ui/tabs/tab';

const muiTheme = getMuiTheme({
palette: {
accent1Color: deepOrange500,
},
});

class Main extends React.Component {

render() {
const standardActions = (

);

return (
  <MuiThemeProvider muiTheme={muiTheme}>
   <Tabs>
    <Tab label="test">
        <p>Hello world</p>
    </Tab>
   </Tabs>
  </MuiThemeProvider>
);

}
}

export default Main;

app.js

import React from 'react';
import ReactDOM from 'react-dom';
import injectTapEventPlugin from 'react-tap-event-plugin';
import Main from './Main'; // Our custom react component

//Needed for onTouchTap
//Can go away when react 1.0 release
//Check this repo:
//https://github.com/zilverline/react-tap-event-plugin
injectTapEventPlugin();

// Render the main app react component into the app div.
// For more details see: https://facebook.github.io/react/docs/top-level-api.html#react.render
ReactDOM.render(

, document.getElementById('app'));

Also I would suggest upgrade to the latest version of MUI

I am closing this as this is not an issue with the library. Leave a comment below if you have any further issues.

@oliviertassinari oliviertassinari added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Dec 21, 2022
@zannager zannager added component: tabs This is the name of the generic UI component, not the React module! and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Jan 12, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: tabs This is the name of the generic UI component, not the React module!
Projects
None yet
Development

No branches or pull requests

4 participants